Question

我认为带DIV样式的clear:both可以使其包含DIV的父级不会换行，但是HTML下面似乎不能以这种方式工作。

如果浏览器窗口很窄，则第二个DIV "OK OK"仍会换行到下一行。

<div style="overflow: hidden;">
  <div style="float: left; overflow: hidden; white-space: nowrap">
    Hello world 1 Hello world 2 Hello world 3
  </div>
  <div style="float: left; overflow: hidden; white-space: nowrap">
    OK OK OK OK OK OK OK OK
  </div>
  <div style="clear: both;">
  </div>
</div>

我错过了什么吗？

Answer 1

我认为你可能会误解“清晰”的财产。它不能专门控制包装，它控制随后出现的浮动元素的位置。上面的html中没有任何内容阻止第二个div流向下一行。

这是清除元素的一个非常好的纲要： http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

为了使布局不流动，您可能需要在容器div上指定硬宽度。

Answer 2

因为两个内部div向左浮动，所以当浏览器窗口变得太窄时它们将会换行。我建议你在外部div上指定一个宽度（你有溢出的那个：隐藏在上面）。这样两个内部div可以浮动，但是当浏览器收缩时它们不会换行。

    <div style="overflow: hidden; width: 600px;">
            <div style="float: left; overflow: hidden; white-space: nowrap">
                     Hello world 1 Hello world 2 Hello world 3
                </div>
            <div style="float: left; overflow: hidden; white-space: nowrap">
                            OK OK OK OK OK OK OK OK
                </div>
            <div style="clear: both;">
            </div>
    </div>

如果你想要更多控制，你可能必须使用IE中的表达式来实现min-width hack; min-width：在FF中工作。

Answer 3

为您的风格添加两个新属性＆amp;它会起作用！

text-align: left;
    width: 1010px;

                 <div style="float: left; overflow: hidden; white-space: nowrap;
                  text-align: left;width: 1010px;">
                  Hello world 1 Hello world 2 Hello world 3
                 </div>

                <div style="clear: both;">
                </div>
                <div style="float: left; overflow: hidden; white-space: nowrap;
                         text-align: left;width: 1010px;">
                        OK OK OK OK OK OK OK OK
                       </div>
                       <div style="clear: both;">
                        </div>
                        </div>

为什么这个“明确：两者”都不能阻止包装？

3 个答案: