Question

我有以下代码;

<div id="first" style="float: left">
</div>
<div id="second">
    <div id="1" style="display: inline-block;">
    </div>

    <div id="2" style="display: inline-block;">
    </div>
    ......
    <div  id= "n" style="display: inline-block;">
    </div>
</div>

问题是当#second中的内容高于#first中的内容时，然后，div中的孩子#second开始在#first下面的新行。

我希望他们只能低于第二个div。

Answer 1

一种简单的方法是在不设置任何宽度或边距的情况下触发#second的块格式化上下文。

应用以下CSS：

#second {
    border: 1px solid blue;
    overflow: auto;
}

请参阅 jsfiddle

上的演示

有关阻止格式设置上下文的详细信息，请参阅：
http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

如果你知道第一个div的最大宽度/宽度，那么只需将宽度值margin-left应用到第二个div。

<强> Working Fiddle

已更新 :( ，如果您不知道宽度）

#second{
    display: table-cell;
}

Fiddle

Answer 3

使用inline-block而不是float。

尝试：

#first, #second{
    display: inline-block;
    vertical-align: top;
}

只要它们彼此相邻，这将确保两者是分开的，因此必须有宽度。

EXAMPLE FIDDLE

修改

或是，如果您不知道宽度

#first, #second{ display: table-cell; }

EXAMPLE FIDDLE 2

DIV float：左边有另一个带显示的div：inline-block wrapps

3 个答案: