CSS垂直对齐的div特定

目前，我有以下的HTML：CSS垂直对齐的div特定

<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让下面的图片可以被复制：

"div-tower"

相反，我目前有如下：

http://jsfiddle.net/kAMB5/

有没有什么方法可以通过css完成我想要的结果？（最好不改变html内容）

UPDATE：你可以假设这些是固定宽度的div。

来源

2013-02-20 dk123

我们可以假设他们是固定宽度的div？ – 2013-02-20 04:19:32

我不认为您可以在不更改HTML内容的情况下将其归档，除非您仅针对这种非常特殊的情况（即固定维度）。 – Passerby 2013-02-20 04:20:24

你需要把objC和objD div放在objB div里面，像这样：http://jsfiddle.net/kAMB5/3/实现所需的结构 – 2013-02-20 04:20:45

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

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

来源

2013-02-20 04:24:40 FelipeAls

感谢您的回复。我最喜欢这个想法，因为它保持'.tower' div之间的独立性，因此防止'.tower'中的CSS属性堆积在一起。如果我以这种方式保持我的节点结构，我还可以将'.tower' div保持在一个简单的数组中。谢谢！ – dk123 2013-02-20 05:58:06

你需要把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>

来源

2013-02-20 04:22:29

在这个结构中，你不能再通过* objB *控制'border'，'padding-bottom'或'margin-bottom'。保存在'.tower'中允许这个 – FelipeAls 2013-02-20 04:27:27

CSS垂直对齐的div特定

回答

相关问题