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网格布局（IE10）或你的.tower CSS3 flexbox（我猜还需要一个容器）可以达到相同的效果，但兼容性较差