我需要创建一个包含多个其他DIV的容器DIV样式。如果浏览器窗口的大小被调整为窄，则会询问这些DIV是否不会自动换行。
我试着让它像下面这样工作。
<style>
.container
{
min-width: 3000px;
overflow: hidden;
}
.slide
{
float: left;
}
</style>
<div class="container">
<div class="slide">something</div>
<div class="slide">something</div>
<div class="slide">something</div>
<div class="slide">something</div>
</div>
这在大多数情况下都有效。然而，在某些特殊情况下，呈现是不正确的。我发现在IE7的RTL中，容器DIV的宽度更改为3000px;结果变得很混乱。
是否有其他方法使容器DIV不包装?
当前回答
<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>
其他回答
你需要的组合是
white-space: nowrap
在父和
display: inline-block; // or inline
关于孩子们
以下是我在没有浮动的情况下工作的(为了视觉效果，我稍微修改了你的例子):
.container { white-space: nowrap; /*Prevents Wrapping*/ width: 300px; height: 120px; overflow-x: scroll; overflow-y: hidden; } .slide { display: inline-block; /*Display inline and maintain block characteristics.*/ vertical-align: top; /*Makes sure all the divs are correctly aligned.*/ white-space: normal; /*Prevents child elements from inheriting nowrap.*/ width: 100px; height: 100px; background-color: red; margin: 5px; } <div class="container"> <div class="slide">something something something</div> <div class="slide">something something something</div> <div class="slide">something something something</div> <div class="slide">something something something</div> </div>
div可以用空格分隔。如果你不想这样，使用margin-right: -4px;代替margin: 5px;对于.slide(它很丑，但处理起来很棘手)。
你可以使用
display: table;
对于您的容器，因此避免溢出:隐藏;。如果你只是为了扭曲而使用它，它应该能起作用。
如果我不想定义一个最小宽度，因为我不知道元素的数量，唯一对我有用的是:
display: inline-block;
white-space: nowrap;
但仅在Chrome和Safari中:/
尽量使用宽度:3000px;以IE为例。
