Question

我正在尝试将内容放入div中，使其水平展开而不是垂直展开。我已经在Stackoverflow和Google上查找了方法，但由于奇怪的原因，它们都不起作用。 .group-container是容器，.group div放在容器中。

我的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;
}

Answer 1

我认为这里需要考虑很多，这取决于你的目标。一般来说，如果您希望<img>水平放置，则需要使.group-container的高度低于两行图像。因此，如果<img>的{{1}}高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空格来换行

Answer 2

我认为此链接可以帮助您。

Expand container div with content width

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

2 个答案: