web-dev-qa-db-ja.com

HTML / CSSで安定した2列のレイアウトを作成する方法

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

コンテナ

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

一般的な列

  • コンテンツの高さに合わせて、高さを可変にする必要があります。
  • 上端が揃うように、横に並べる必要があります。
  • 境界、パディング、またはマージンのいずれかのピクセルがいずれか1つに適用された場合でも、レイアウトが壊れたり、互いに折り返されたりしないようにしてください。これは非常に不安定で不幸です。

特に左の列

  • ピクセル単位の固定の絶対幅が必要です。

具体的には右の列

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

必要な安定性

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

バックグラウンド

フローティング要素が使用されている場合、右の列が左の列の下に折り返されたり、コンテナに両方の列が含まれない可能性はありません（列の一部をクリップするか、列の一部が境界をオーバーフローさせることにより） ）、またはそのスクロールバーが表示されます（したがって、overflow：hidden以外を使用して浮動要素の包含をトリガーすることを提案するのはうんざりします）。列に境界線を適用しても、レイアウトが崩れることはありません。列の内容、特に右の列の内容がレイアウトを壊してはなりません。

これには単純なテーブルベースのソリューションがあるように見えますが、あらゆる状況下で惨めに失敗します。たとえば、Safariでは、コンテナが小さくなりすぎると、指定した幅を維持するのではなく、左の固定幅の列が縮小します。また、CSS幅がTD要素に適用された場合、その中に何か大きなものが置かれた場合に拡大するように、要素の最小幅を参照します。 using table-layout：fixed;役に立たない。右の列を表すTD要素が残りの領域を埋めるために展開されない、または（たとえば、1ピクセル幅の3番目の列は右側にすべて押し出されます）が、右側の列の周りに境界線を配置すると、インラインコンテンツと幅が設定されたブロックレベルの要素と同じ幅になります100％は列の幅を埋めませんが、インラインコンテンツの幅と一致します（つまり、TDはコンテンツに完全に依存しているようです）。

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

htmlcssresizabletwo-column-layout
49
Triynko

どうぞ：

<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/

77
richzilla

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

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

これを試してください： Live Demo

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
}
19
thirtydot

ケーキ。

960Grids を使用して 自動レイアウトビルダー に移動し、2列の流動的なデザインを作成します。動作するグリッドの幅に合わせて左の列を作成します。これはグリッドを使用する唯一の課題であり、チュートリアルを読むと非常に簡単です。簡単に言うと、グリッドの各列は特定の幅であり、使用する列の量を設定します。特定の幅の列を正確に取得するには、列の幅が正確になるように数学を調整する必要があります。それほど厳しくない。

他の人がすでにあなたのためにその戦いと戦ったので、包むチャンスはありません。おそらくあなたが行く必要がある限りの互換性。すばやく簡単に....今、ダウンロード、カスタマイズ、展開します。

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

0
bpeterson76