使用nth-child并排显示div-左边一个较大的div，右边两个较小的div，但是第二个较小的div继续被按下

Question

我正在玩nth-child并试图创建一个看起来像这样的布局

但由于某种原因，较大的div只允许一个较小的div显示在它的侧面，它会像这样推下第二个较小的div：

即使根据它们应该适合的尺寸。我在这里缺少什么或不理解？我在下面包含了我的HTML和CSS：

#main {
  text-align: center;
}
.boxes {
  font-size: 30px;
  height: 200px;
  width: 45%;
  background-color: grey;
  margin: 10px;
  display: inline-block;
}
.boxes:nth-child(6n-2) {
  font-size: 30px;
  height: 420px;
  margin: 10px;
}
.boxes:nth-child(6n-5) {
  font-size: 30px;
  height: 420px;
  margin: 10px;
}

<div id="main">
  <div class="boxes">box1</div>
  <div class="boxes">box2</div>
  <div class="boxes">box3</div>
  <div class="boxes">box4</div>
  <div class="boxes">box5</div>
  <div class="boxes">box6</div>
</div>

Answer 1

您需要为这些框分配浮动参数：float:left到框1,2,3，float:right到框4,5,6

这是一个codepen：http://codepen.io/anon/pen/mPojBJ

（宽度/边距仍然需要调整）

Answer 2

我认为这对您有用，请参阅小提琴https://jsfiddle.net/c259LrpL/44/

将.boxes{display: inline-block}更改为.boxes{float: left}

.boxes {
  font-size: 30px;
  height: 200px;
  width: 45%;
  background-color: grey;
  margin: 10px;
  float: left;
}

然后向右漂浮另一个大盒子

.boxes:nth-child(4) {
    float: right;
    margin-right: calc(100% - (90% + 30px)) !important;
}

Answer 3

<style type="text/css">
.main{
    height:500px;
    width:400px;
}
div.subDiv{
    height:50%;
    margin:5px;
}
div.subDiv>div{
    width:47%;
    height:100%;
    display:inline-block;
}
div.subDiv>div>div{
    height: 122.5px;
    background-color:gray;
}
div.subDiv>div>div+div{
    margin-top:5px
}
.gray{
    background-color:gray;
}
</style>

<div class="main">
    <div class="subDiv">
        <div class="gray"></div>
        <div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="subDiv">
        <div>
            <div></div>
            <div></div>
        </div>
        <div class="gray"></div>
    </div>
</div>

您好。如果您将执行上述实现，将会更容易。如您所见，我没有使用float：left因为使用display更有效：inline-block;