停止包含包含div？ [英] Stop wrapping contained divs?

问题描述

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

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

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

style.css:

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

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

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

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

所以，我想每个元素要彼此相邻排列（在一行中为4），但只有前两个可见（容器为200px，每个元素为100px，因此只有2个一次可见），而用户可以滚动

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)

但是，使用这个设置，元素3和4会缩小到下一行

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

使用 white-space：nowrap 更新容器类别什么都不做。

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

任何想法？提前感谢！

推荐答案

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

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

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

这篇关于停止包含包含div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！