54

2 列のコンテナーが必要です。詳細：

コンテナ

  • 幅は親要素の 100% に調整する必要があります (簡単に実現できます)。
  • 高さは両方の列を含むように調整する必要があります (つまり、その高さは 2 つの列の大きい方の高さと正確に等しくなければならないため、オーバーフローが発生せず、スクロールバーが表示されません)
  • 左の列の幅の 2 倍に等しい最小サイズが必要です。

コラム全般

  • コンテンツの高さに合わせて高さを可変にする必要があります。
  • 上端が一直線になるように並べて配置する必要があります。
  • ボーダー、パディング、またはマージンが 1 ピクセルでもどちらかに適用されている場合でも、レイアウトを壊したり、相互にラップしたりしないでください。非常に不安定で不幸なことになるからです。

具体的には左の列

  • 固定の絶対幅をピクセル単位で指定する必要があります。

特に右の列

  • 幅は、コンテナー内の残りのスペースを埋める必要があります。言い換えると...
  • 幅は、コンテナーの幅から左の列の幅を引いた値に等しくなければなりません。つまり、この列内に DIV ブロック要素を配置し、幅を 100% に設定し、高さを 10px のように指定し、背景色を指定します。左の列の右端からコンテナーの右端まで、高さ 10px の色付きのストリップが表示されます (つまり、右の列の幅を埋めます)。

必要な安定性

コンテナーは、(ブラウザー ウィンドウのサイズを変更することによって) 最小幅 (以前に指定された) まで、またはレイアウトを壊すことなく、より大きな幅までサイズ変更できる必要があります。「壊れる」には、左の列のサイズがまったく変更されないこと (ピクセル幅が固定されていることを思い出してください)、右の列が左の列の下に折り返されること、スクロールバーが表示されること、右の列のブロック要素が列の幅全体を占めることができないことが含まれます。 、および一般に、前述の仕様のいずれも当てはまりません。

バックグラウンド

フローティング要素が使用されている場合、右の列が左の列の下に折り返されたり、コンテナーが両方の列を含むことができなくなったりする可能性はありません (列の一部を切り取ったり、列の一部を境界からオーバーフローさせたりすることにより)。 ）、またはスクロールバーが表示されます（したがって、フロート要素の封じ込めをトリガーするために、overflow:hidden 以外のものを使用することを提案するのはうんざりです）。列に境界線を適用しても、レイアウトが崩れないようにする必要があります。列のコンテンツ、特に右側の列のコンテンツがレイアウトを崩してはなりません。

これには単純なテーブルベースの解決策があるようですが、あらゆる状況下で惨めに失敗します。たとえば、Safari では、コンテナーが小さくなりすぎると、指定した幅を維持するのではなく、固定幅の左側の列が縮小されます。また、CSS 幅が TD 要素に適用された場合、最小幅を参照し、その中に大きなものが配置された場合に拡張されるようです。table-layout:fixed; を使用してみました。役に立ちません。また、右側の列を表す TD 要素が残りの領域を埋めるために拡張されない、またはそのように見える場合も見てきました (たとえば、1 ピクセル幅の 3 番目の列が右側に押し出されます)。右側の列の周りに境界線を配置すると、インライン コンテンツと同じ幅しかないことが示されます。

私が見た1 つの潜在的な解決策は複雑すぎます。IE8、Firefox 4、および Safari 5 で動作する限り、IE6 についてはあまり気にしませんでした。

4

3 に答える 3

83

どうぞ：

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
      /* Change this to whatever the width of your left column is*/
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
    <div class="clear"></div>
  </div>
</body>

</html>

ここで実際の動作を確認してください：http：//jsfiddle.net/FVLMX/

于 2011-04-06T23:23:24.760 に答える
21

IE8、Firefox 4、および Safari 5 で動作する限り、IE6 についてはあまり気にしません。

これは私を幸せにします。

これを試してください:ライブデモ

display: table驚くほど良いです。IE7 が気にならなくなったら、自由に使用できます。の通常の欠点は実際にはありません<table>。

CSS:

#container {
    background: #ccc;
    display: table
}
#left, #right {
    display: table-cell
}
#left {
    width: 150px;
    background: #f0f;
    border: 5px dotted blue;
}
#right {
    background: #aaa;
    border: 3px solid #000
}
于 2011-04-06T23:08:31.690 に答える
0

簡単なことです。

960Gridsを使用自動レイアウト ビルダー に移動し、2 列の流動的なデザインを作成します。機能するグリッドの幅に合わせて左の列を構築します....これはグリッドを使用する唯一の課題であり、チュートリアルを読めば非常に簡単です。簡単に言えば、グリッド内の各列は特定の幅であり、使用する列の数を設定します。正確に特定の幅の列を取得するには、列の幅が正確になるように計算を調整する必要があります。あまりにもタフではありません。

他の人がすでにあなたのためにその戦いを戦ったので、ラッピングのチャンスはありません. 必要になる可能性が高い限り、互換性を取り戻します。すばやく簡単に....今すぐ、ダウンロード、カスタマイズ、展開します。

出来上がり。グリッド FTW。

于 2011-04-06T22:49:52.763 に答える