0

私は2列のレイアウトに取り組んでいます。しかし、テンプレートが非常に複雑で、列ごとに1つのdivを設定できないため、これを行うのに問題があります。

たとえば、次のようなものがあります。

<div class="column left">
  left column - part 1
</div>
<div class="column right">
  right column - part 1
</div>
<div class="column right">
  right column - part 2
</div>
<div class="column left">
  left column - part 2
</div>

そして、私がやりたいのは、同じ幅で、それらの間に（垂直に）空の穴がない2つの列を作成することです。通常、次の方法で実行しても問題はありません。

<div class="column left">
  left column - part 1
  left column - part 2
</div>
<div class="column right">
  right column - part 1
  right column - part 2
</div>

さらに、私の目標は、IE7のような古いブラウザで機能するソリューションを用意することです。しかし、面白い解決策があるかもしれないと思うので、新しいブラウザでのみサポートされる解決策も見たいです。もちろん、JSを介したソリューションもあります。たとえば、すべての.column.leftの要素を1つのdivにマージし、.column.rightについても同じことですが、CSSソリューションの方が優れています。

ありがとう！

4

1 に答える 1

0

特定の順序でなく、異なる列からの div を必須にする必要はありますか? その場合、別の列の要素の上にいくつかの要素を配置する必要があるため、純粋な css では実現できません。CSS を使用して DIV を並べ替える を参照してください。

それが問題でない場合は、コード内の右列の div の前にすべての左列の div を記述し、次の css を使用してみてください。

.left {
    float: left;
    width: 100px;
    clear: left;
}

.right {
    margin-left: 100px;
}

2 列のレイアウトを作成します。この方法は、列の 1 つが定数幅の場合に特にうまく機能しますが100px、たとえば50%. 例: http://jsfiddle.net/uQwUT/。

于 2012-08-22T21:05:13.013 に答える