嵌套的div元素向左浮动 [英] Nested div elements wrapping with float left

问题描述

我有四个带有 float：left 的嵌套div元素，由于容器的长度，第四个元素包装在第一个元素之下。

I have four nested div elements with float:left and the fourth element is wrapping below the first due to the length of the container.

.container {
    width: 320px;
    height: 110px;
    overflow-x:scroll;
    border: 1px solid blue;
}

.nested      {
    width: 80px;
    height: 80px;
    background: red;
    float:left;
    margin:5px;

}

<div class='container'>
<div class='nested'></div>
<div class='nested'></div>
<div class='nested'></div>
<div class='nested'></div>
</div>

如何停止换行，以使查看的元素在x轴上可滚动（甚至隐藏） / truncated）？

How do I stop the wrapping so that the viewed elements are scrollable in the x axis (or even hidden/truncated)?

http://jsfiddle.net/Tku65 /

推荐答案

演示

  white-space: nowrap;

将此属性添加到容器中。

Add this property to your container.

尽量避免浮动属性。在这种情况下，使用 display：inline-block; 。

Try to avoid float properties. Use display: inline-block; in this case.

这篇关于嵌套的div元素向左浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！