0

固定幅のフローティング div で構成される 2 列のレイアウトがあります。最初の列の内側には、幅の広い要素があります。したがって、html レイアウトは次のようになります。

<div id="container">
    <div id="column1">
        ...short content...
        <div id="extra-wide">
            ...wide content...
        </div>
    </div>
    <div id="column2">
        ...long content...
    </div>
</div>

注釈が付けられているように、最初の列には短い量のコンテンツが含まれ、2 番目の列には長い量のコンテンツが含まれています。CSS は次のようになります。

#column1 { width: 200px; }
#column2 { width: 100px; }
#extra-wide { width: 250px; }

したがって、非常に幅の広い要素は、実際にはその親である column1 よりも幅が広くなっています。また、事前にどの要素の高さもわかりません。それらはすべて可変です。

ここでの問題は、column2 が column1 の非常に幅の広い要素の上に重なって表示されることです。これを視覚化するのに役立つ jsfiddle があります: http://jsfiddle.net/e3KNg/ (このフィドルには、何が起こっているかをより明確にするために、いくつかのコンテンツが挿入され、色が追加されています) スクリーンショットは次のとおりです。

column2 オーバーラップ エクストラワイド

基本的な HTML 構造または 3 つの要素の幅を変更せずに、(Javascript を使用せずに) column1 の幅の広い要素を column2 の下に強制的に表示することはできますか? これが私が達成しようとしている効果です：

column2 を非常に広く押し下げる

これは、html 要素を再配置するか、Javascript を使用することで実行できることはわかっていますが、上記の制約内で解決策を探しています。さまざまな場所で div をクリアしたり、フロートを削除または調整したり、オーバーフロー設定を試したりしてみましたが、探していた効果を得ることができませんでした。

4

1 に答える 1

1

それを見ると、コンテンツ要素に高さを設定したり、javascript を使用して高さを調整したり、幅の広い要素に配置を設定したりしないと、探しているものを達成できません。

余分な幅の要素とトップ値の絶対配置を使用し、いくつかの巧妙な css を使用して列を同じ高さにするフィドルを次に示します。

http://jsfiddle.net/yKRu4/1/

これは機能しますが、正直なところ、あなたが設定した制限では、あなたが探しているものを達成できないと感じています。

于 2012-10-17T17:29:49.393 に答える