Question

我正在尝试创建一个具有固定宽度（例如宽度：300px）的div父容器，其中包含div（例如width：80px）。但是当容器得到4个div（即80 * 4 = 320px> 300px）时，它包裹了第四个div。我希望没有div的包装，而是我们可以执行水平滚动，这样容器宽度保持300px，如果div超出视觉，我们可以水平滚动查看所有div。

<html>
<body>
  <div id="parent" style="width:300px;overflow:scroll;">
    <div class="child" style="width:80px; float:left;">lorem</div>
    <div class="child" style="width:80px; float:left;">ipsum</div>
    <div class="child" style="width:80px; float:left;">dolore</div>
    <div class="child" style="width:80px; float:left;">lorem</div>
  </div>
</body>
</html>

Answer 1

.child {
   display: inline-block;
}

#parent {
   white-space: nowrap;
}

以下是示例：http://jsfiddle.net/qnpGm/

更新：在ie6 / ie7中，这仅适用于具有自然显示的元素：内联。感谢您的评论：）

Answer 2

尝试将white-space:nowrap;添加到您的#parent样式中。没有在你的代码上测试过这个，但是我已经在类似的情况下使用了这个，我需要扩展一个包含多个子div的div而不为父代设置宽度。

Answer 3

因此，“内联块”会出现有关交叉浏览器可压缩性的问题（IE 6），我想如果没有额外的标记，这是不可能的。

因此，我们假设“父”是您的视口。然后你需要一个容器，缠绕着“子”元素，与所有元素具有相同的宽度 - 在你的情况下为320px。您可以使用服务器端语言或javascript来计算。

<html>
<body>
  <div id="parent" style="width:300px;overflow:scroll;">
    <div id="view" style="width:320px;">
        <div class="child" style="width:80px; float:left;">lorem</div>
        <div class="child" style="width:80px; float:left;">ipsum</div>
        <div class="child" style="width:80px; float:left;">dolore</div>
        <div class="child" style="width:80px; float:left;">lorem</div>
    </div>
  </div>
</body>
</html>

避免div（s）换行

3 个答案: