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


当前回答

你可以使用

display: table;

对于您的容器,因此避免溢出:隐藏;。如果你只是为了扭曲而使用它,它应该能起作用。

其他回答

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

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

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

你需要的组合是

white-space: nowrap

在父和

display: inline-block; // or inline

关于孩子们

你可以使用

display: table;

对于您的容器,因此避免溢出:隐藏;。如果你只是为了扭曲而使用它,它应该能起作用。

使用display:flex和white-space:nowrap

p{ display:flex; white-space:nowrap; overflow:auto; } <h2>Sample Text.</h2> <p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p> <h3>Then some other text</h3>