Question

我目前在容器div中设置了div，如下所示：

<div id="container">  
    <div id="element"> Element 1 content </div>  
    <div id="element"> Element 2 content </div>  
    <div id="element"> Element 3 content </div>  
    <div id="element"> Element 4 content </div>  
</div>

的style.css：

.container {
width:200px;
overflow-x:auto;
overflow-y:hidden;
}  

.element {
width:100px;
float:left;
}

这是代码的jsFiddle：http://jsfiddle.net/vZWTc/。

所以，我希望每个元素彼此相邻排列（一行中所有4个），但只有前两个可见（容器是200px，每个元素是100px，因此只有2个可见于一个时间），而用户可以（水平）滚动到第3和第4个元素（因为它们不太重要）

但是，通过此设置，元素3和4将换行到下一行

使用white-space:nowrap更新容器类不会做任何事情。这只会影响文字，而不会影响div。

有什么想法吗？提前谢谢！

Answer 1

使用包含4个元素总宽度的包装div，并将容器设置为隐藏溢出，html示例......

<div class="container">
  <div class="wrapper">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
  </div>
</div>

和css

.container { width:200px; overflow-x:auto; overflow-y:hidden; }
.wrapper { width: 400px; }
.element { width:100px; float:left; }

Answer 2

有两种方法：

1）Clearfix - 添加到容器中。

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

2）清除DIV - 放在最后一个浮动元素之后。

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

.clear {
   clear:both;
   font-size:0;
}

您可以使用无序列表代替您的情况保存一些标记：

<ul id="container">  
    <li> Element 1 content </li>  
    <li> Element 2 content </li>  
    <li> Element 3 content </li>  
    <li> Element 4 content </li>  
</ul>

这样您就可以在没有类名的情况下设置内容的样式。它也具有更多的语义感。

.container li {
   ...
}

Answer 3

Div是块级元素 - 这意味着它们会创建一个新行。如果您希望块级元素彼此相邻，则需要使用float:left或float:right进行浮动。当你想让东西开始换行时，请记得用clear: both清除它们。

要阻止它们包装，您可以使用overflow:参数。

我还建议使用CSS直接子选择器而不是指定同一个类 element一遍又一遍。 div.container > div { color: red; }

Answer 4

您可以设置身高：like so

.container { width:200px; height:20px; overflow-x:auto; overflow-y:hidden; }
.element { width:100px; height:20px;  float:left; }


<div class="container">
<div class="element"> Element 1 content </div>
<div class="element"> Element 2 content </div>
<div class="element"> Element 3 content </div>
<div class="element"> Element 4 content </div>
</div>

Answer 5

首先，对于这些字段使用这些CSS样式 - 它们分别需要是#container和#element。或者更改它或使用包装div来处理滚动。

<强>标记：

<div id="container">
<div class="wrappingcontainer">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
</div>

<强> CSS：

    #container { width:200px; overflow-x:auto; overflow-y:hidden; }
   .element { width:100px; float:left; }
   .wrappingcontainer{ width: 400px; }

Demo available here!

停止包含div？

5 个答案: