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

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