3

私は現在次の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であると想定できます。

4

2 に答える 2

3

objCとobjDdivをobjBdiv内に次のように配置する必要があります。目的の結果を得るには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-20T04:22:29.633 に答える
1

http://jsfiddle.net/kAMB5/4/のように、追加のdivラッピングが必要です。.tower

それとは別に、CSSグリッドレイアウト(IE10)または.towerCSS3フレックスボックス(まだコンテナが必要だと思います)でも同じ結果が得られますが、互換性は低くなります

于 2013-02-20T04:24:40.090 に答える