如何在 2 个 div 上显示内联：块，其中 1 个有子 div

Question

我有一些看起来像这样的html：

<div id="main">hello</div>
<div id="second">
    <div id="one">hello</div>
    <div id="two">hello</div>
    <div id="three">hello</div>
    <div id="four">hello</div>
</div>

无论我尝试什么，我都无法让它们看起来像这样：

我试过显示块，但单独的 div 把它搞砸了。 任何帮助将非常感激。 谢谢你！

** - - 编辑 - -**

我被要求展示我的 css，但基本上就是这样。 另外，请注意我不能操作 HTML：

#main, #second, #one, #two, #three, #four {
    display: block;
    padding: 0 5px 5px 0;
} 

Answer 1

只需要在正确的地方清除。

#main,
#second > div {
    border: 1px solid black;
    width: 150px;
    height: 150px;
    float:left;
    margin: 4px;
}

#second > div:nth-of-type(2n) {
    clear:left;
}

http://jsfiddle.net/ZTVz8/2/

Answer 2

检查这个JSFiddle

基本上我将你的 div 设置为float:left ，然后清除它们。 最简单的解决方案。 :)

Answer 3

在您的情况下，我会执行以下操作，但没有子 div：

小提琴

HTML

<div id="main">main</div>
<div class="box">1</div>
<div class="box clear">2</div>
<div class="box">3</div>
<div class="box clear">4</div>

CSS

#main {
    border: 2px solid black;
    width: 100px;
    text-align:center;
    height: 100px;
    display:inline-block;
    float:left;
    margin: 5px;
}
.box {
    float: left;
    border: 2px solid black;
    width: 100px;
    text-align:center;
    height: 100px;
    display: inline-block;
    margin: 5px;
}
.clear {
    clear: both;
}