css - css垂直对齐特定的div

Question

我目前有以下html：

<div>objA</div>
<div class="tower">objB</div>
<div class="tower">objC</div>
<div class="tower">objD</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>

我想塔（垂直对齐）“塔”类中的 div，以便可以复制以下图像：

相反，我目前拥有的是以下内容：

http://jsfiddle.net/kAMB5/

有什么方法可以让我纯粹通过 css 来实现我想要的结果？（最好不改变html内容）

更新：您可以假设这些是固定宽度的 div。

Answer 1

您需要将 objC 和 objD div 放入 objB div 中，如下所示：DEMO以获得所需的结果：

HTML：

<div>objA</div>
<div>
    objB
    <div class="tower">objC</div>
    <div class="tower">objD</div>
</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>

Answer 2

你需要一个额外的div包装你.tower的：http: //jsfiddle.net/kAMB5/4/

除此之外，CSS Grid Layout (IE10) 或.towerCSS3 flexbox（我猜仍然需要一个容器）可以达到相同的结果，但兼容性较差