Question

更新：我正在使用overflow-x（这只是我的问题是错误的）

在这种情况下，水平滚动条应该显示，但不是

<div style="overflow-x:scroll; width:400px">
  <div style="float:left; width:300px">abc </div>
  <div style="float:left; width:300px">abc </div>
  <div style="clear:both"></div>
</div>

在这种情况下如何使用div溢出？

Answer 1

要回答您的问题，您的孩子div不会导致父div溢出。您当前的设计不会导致父项溢出，因为两个子项都设置为float:left

好像你假设孩子们会水平堆放;关闭浮动并将它们放在相邻单元格中宽度为600px的表格中，看看它的作用。

另请注意，CSS overflow属性与浏览器高度相关。有些浏览器使用overflow:scroll，有些使用overflow:auto。

Answer 2

如果您需要水平滚动条，则需要使用overflow-x: scroll;。内部子div也必须比父div更宽，以便滚动条工作。所以你的代码看起来如下：

<div style="overflow-x:scroll; width:400px">
  <div style="float:left; width:450px">abc </div>
  <div style="float:left; width:450px">abc </div>
  <div style="clear:both"></div>
</div>

水平滚动条不显示

2 个答案: