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


当前回答

这招对我很管用:

.container { 显示:inline-flex; } .slide { 浮:左; } < div class = "容器" > < div class = "幻灯片”> something1 < / div > < div class = "幻灯片”> something2 < / div > < div class = "幻灯片”> something3 < / div > < div class = "幻灯片”> something4 < / div > < / div >

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

其他回答

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

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

你需要的组合是

white-space: nowrap

在父和

display: inline-block; // or inline

关于孩子们

在Internet Explorer中min-width属性不能正确工作,这很可能是您的问题的原因。

阅读信息和 一个出色的脚本,修复了许多IE CSS问题。

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

你可以使用

display: table;

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