html - DIV float:left 和另一个 div 显示：inline-block wraps

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>

问题是当in 的内容#second比in 的内容高时#first，那么childdiv的in 在#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。

工作小提琴

更新：（如果您不知道宽度）

#second{
    display: table-cell;
}

小提琴

Answer 3

使用 inline-block 而不是 float。

尝试：

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

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

示例小提琴

编辑

或者是的，如果你不知道宽度

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

示例小提琴 2