Html 停止包装包含的 div？

Stop wrapping contained divs?

提问by Esaevian

I currently have a setup of divs within a container div, as follows:

我目前在容器 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:

样式.css：

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

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

Here's a jsFiddle of the code: http://jsfiddle.net/vZWTc/.

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

So, I would like each of the elements to line up next to each other (all 4 in one row), but only have the first two visible (container is 200px, each element is 100px, so only 2 are visible at a time), while the user can scroll (horizontally) to the 3rd and 4th elements (as they are less important)

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

However, with this setup, elements 3 and 4 wrap down to the next line

但是，使用此设置，元素 3 和 4 会自动换行到下一行

updating the container class with white-space:nowrapdoes nothing. That only affects text, not divs apparently.

更新容器类white-space:nowrap什么也不做。这只影响文本，显然不影响 div。

Any ideas? Thanks in advance!

有任何想法吗？提前致谢！

回答by Han Dijk

Use a wrapper div with the total width of the 4 elements, and set the container to hidden overflow, html example...

使用具有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>

and for the css

和 css

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

回答by Diodeus - James MacFarlane

There are two methods:

有两种方法：

1) Clearfix - added to the container.

1) Clearfix - 添加到容器中。

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

2) Clearing DIV - placed after the last floating element.

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

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

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

You can save some markup in your situation be using an unordered list instead:

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

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

This way you can style the contents without and extra class name. It makes more semantic sense as well.

通过这种方式，您可以设置没有额外类名的内容样式。它也有更多的语义意义。

.container li {
   ...
}

回答by mrtsherman

Divs are block level elements - which means they create a new line. If you want block level elements next to eachother then they will need to be floated with float:leftor float:right. Remember to clear them with clear: bothwhen you want stuff to start going onto new lines.

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

To prevent them from wrapping you can use the overflow:parameter.

为了防止它们换行，您可以使用该overflow:参数。

I would also suggest using the CSS direct child selector instead of specifying the same class elementover and over again. div.container > div { color: red; }

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

回答by Bryan Thomas

You can just set height: 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>

回答by Rion Williams

Firstly for these fields to use those CSS styles - they would need to be #container and #element respectively. Either that or change it to use a wrapping div to handle the scrolling.

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

Markup:

标记：

<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:

CSS：

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

Demo available here!

演示可用在这里！