如何在2行上排列不同高度的div，不能编辑HTML

Question

我想制作两行div。 div有不同的高度。就像下面的图像一样。

这些div是wordpress帖子。它们应该是这样的：首先在左边，下一个在右边，下一个在左边等。

不幸的是，我只能更改包含wordpress帖子的div的样式。 我无法添加html标签或在html中创建两列。那么，它只能通过设置div元素的样式来完成吗？

div没有ID，我必须使用#container div{}

我找到的唯一解决方案就是这个：

div{float:left; width:345px; min-height:680px; max-height:680px;}

这样可行，但我的一些div高于680px并且它们在其他部分之上。

Answer 1

尝试以下方法：

<div id="left-side">
    <div class="pull-left">
    </div>
    <div class="pull-left">
    </div>
    <div class="pull-left">
    </div>
</div>
<div id="right-side">
    <div class="pull-left">
    </div>
    <div class="pull-left">
    </div>
    <div class="pull-left">
    </div>
</div>

使用以下CSS：

left-side {
    float: left;
}

right-side {
    float: right;
}

pull-left{ 
    float: left;
}

Answer 2

假设你希望其他所有div都像这样被拉开：

div:nth-child(2n+3) {
 float:left;
}

div:nth-child(2n+4) {
 float:right;
}

+3和+4假设在你不想触摸之前有3个div。这需要针对您的具体情况进行调整，但如果没有看到具体结构，就无法确定任何事情。