2

Web ページで次の 2 列のレイアウトを作成しようとしています。

+-------+---+
|       |   |
|       |   |
|   A   | B |
|       |   |
|       |   |
|       |   |
|       +---+
|       |   |
|       | C |
|       |   |
+-------+---+

次の特徴があります。

  1. 左右の列の幅はどちらも固定です。
  2. C の内容は固定されているため、C の高さは固定されています。
  3. A と B のコンテンツの量は異なる場合があるため (エンド ユーザーがこれを提供します)、A と B に必要な最小の高さも異なる場合があります。
  4. A が B と C を合わせたものよりも高い高さを必要とする場合、B の高さを伸ばして C に触れ続け、C の底が A の底と揃うようにする必要があります。
  5. A の高さが B と C を合わせたものよりも小さい場合は、A と C の下部が揃うように A を引き伸ばす必要があります。
  6. A と B は境界線や背景色が異なるため、どちらかを引き伸ばさなくてもごまかすことはできません (また、C は引き伸ばす必要がありません)。

各セルを div で表し、jQuery のドキュメント準備完了イベントを使用して、最も高い列に応じてセルを適切な高さに調整することで、これを試みました。
ほとんどの場合、これでうまくいきます。ただし、A には埋め込まれた YouTube ビデオが含まれており、C には埋め込まれた Google マップ セクションが含まれているため、多くの動的コンテンツの調整が行われています。これにより、JavaScript コードが間違った高さの値で動作し、レイアウト プロセスが台無しになることがあります。 .
また、コンテンツ セルが正しい高さに引き伸ばされているのを見ると、見栄えが悪くなります。

別の方法として、「すべての列を均等に高く保つ」動作が組み込まれているため、このレイアウトにテーブルを使用してみました。
このアプローチの問題は、A に "td rowspan=2" を使用する必要があることです。これを行うと、IE と Chrome は C で指定した固定の高さを無視しますが、代わりに C が高すぎます。

したがって、基本的に、この（一見単純な）レイアウトを実装する方法に完全に固執しています。誰かが私を正しい方向に向けることができますか?

私は Chrome、FireFox、および IE7+ をターゲットにしていますが、IE7 および IE8 では、目的のレイアウトの合理的な近似値が許容されます。

4

2 に答える 2

1

この混合divをテーブルとして試してください。私は Mac を使っていますが、IE ではテストできませんが、IE ではうまく動作すると思います

HTML:

<div id="table">
    <div id="table-cell-left">
        <div id="aid" class="row">A ID</div>
    </div>
    <div id="table-cell-right">
        <div id="bid" class="row">B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br /></div>
        <div id="cid" class="row">C ID</div>
    </div>
</div>

CSS:

#table{display:table;}

#table-cell-right,
#table-cell-left{display:table-cell;}

#table-cell-left{background:blue;}

#aid,#bid,#cid{width:150px}

#aid{height:100%;border:1px solid #ccc;}
#bid{height:auto;border:1px solid #000;background:red;}
#cid{height:20px;float:right;background:yellow}

ここでデモを見る: http://jsfiddle.net/WpuPq/5/

于 2013-06-06T21:14:12.407 に答える