如何显示内联：块上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：

FIDDLE

<强> 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;
}