我需要创建一个包含多个其他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不包装?


当前回答

溢出:隐藏应该给你正确的行为。我的猜测是RTL是混乱的,因为你在封装的divs上有float: left。

除了那个虫子,你的行为还不错。

其他回答

溢出:隐藏应该给你正确的行为。我的猜测是RTL是混乱的,因为你在封装的divs上有float: left。

除了那个虫子,你的行为还不错。

尝试使用空格:nowrap;在容器样式中(而不是overflow: hidden;)

以下是我在没有浮动的情况下工作的(为了视觉效果,我稍微修改了你的例子):

.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:inline-block;

尽量使用宽度:3000px;以IE为例。