文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS div水平扩展而不是垂直扩展

问CSS div水平扩展而不是垂直扩展
EN

Stack Overflow用户

提问于 2015-09-29 11:10:53

回答 2查看 1.9K关注 0票数 2

我试图将内容放到div中，并使其水平扩展，而不是垂直扩展。我在Stackoverflow和Google上查找了一些方法，但出于某种奇怪的原因，它们都不起作用。.group-container是容器，.group分区与容器放在一起。

我的html页面

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Website Title</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="scroll.js"></script>
</head>

<body>

<!-- HEADER BEGIN -->
<div class="header">


<img src="logo2.png" class="logo" alt="" />

<div class="right-menu-holder">


<a href="" class="menu-links">LOGIN</a>
&nbsp;
<input type="button" class="searchbtn" value="SEARCH" />

<div class="right-side-container">
<input type="text" class="search-field" />
</div>

<div class="clear"></div>

</div>
<div class="clear"></div>

</div>
<!-- HEADER END -->
    <img src="left_arrow.png" id="arrowL" />
    <img src="right_arrow.png" id="arrowR" />
    <div class="clear"></div>

<!-- GROUP CONTAINER AND INNER BEGINS-->
<div class="group-container">

<div class="group" id="group">
<font class="trending">Trending 1</font>
<br />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<br />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<br />
</div>



<div class="group" id="group">
<font class="trending">Trending 2</font>
<br />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<br />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<br />
</div>



<div class="group" id="group">
<font class="trending">Trending 3</font>
<br />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<br />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<br />
</div>



<div class="group" id="group">
<font class="trending">Trending 4</font>
<br />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<br />
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" />
<br />
</div>


<div class="clear"></div>





</div>
<!-- GROUP CONTAINER AND INNER END -->



<!-- FOOTER BEGIN -->
<div class="footer"> &copy; 2015 Website</div>
<!-- FOOTER END -->
</body>
</html>

和两个div的css

.group-container{
    width:1296px;
    height:83%;
    margin-left:2.5%;
    margin-top:20px;
    overflow-x:auto;
    white-space:nowrap;
    position:relative
}

#group{
    white-space:normal;
    display:inline-block;
    float:left;
    width:1296px;
}

css

html

回答 2

Stack Overflow用户

发布于 2015-09-29 11:47:41

我认为这里有很多需要考虑的地方，这取决于你想要什么。一般来说，如果你想让你的<img>水平放置，你需要使.group-container的高度小于两行图像。因此，如果您的<img>为180px高电平，请至少将.group-container设置为180px。

.group-container {
    height:200px;
}

然而，当你开始添加更多的图片时，你会遇到其他问题。一旦图像占据了比1296px更大的宽度，它们就会开始成行起球。您需要继续将.group-container设置得更大。(更不用说在这一点上它不适合任何屏幕)。

一个很好的解决方法是在图像float:left;上设置CSS，并在.group-container上设置固定的高度。如果您希望将长条图像包含在适合屏幕大小的内容中，请将.group-container放入另一个div元素中，并为其提供width和height，以及overflow-x: auto;

.group-container {
    height:200px;
}
.group-container img {
    float:left;
}
.group-container-parent {
    width:100%;
    overflow-y:auto;
}

您的HTML代码将类似于

<div class="group-container-parent">
    <div class="group-container">
        <img ... />
        <img ... />
        ...
    </div>
</div>

正如@trashr0x指出的那样，良好的语义会非常有用，还可以避免使用<font>标签和使用CSS空格换行

票数 0

Stack Overflow用户

发布于 2015-09-29 12:56:32

我认为这个链接可以帮助你。

Expand container div with content width

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32835078

复制

相似问题

问CSS div水平扩展而不是垂直扩展
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS div水平扩展而不是垂直扩展EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS div水平扩展而不是垂直扩展
EN