50

DIV を使用して 2 列のレイアウトを作成したいと考えています。右の列は 200px の固定幅で、左の列は残りのすべてのスペースを取ります。

テーブルを使用する場合は、非常に簡単です。

<table width="100%">
  <tr>
    <td>Column 1</td>
    <td width="200">Column 2 (always 200px)</td>
  </tr>
</table>

しかし、DIV はどうでしょうか。これを達成することは可能ですか？はいの場合、どのように？

4

7 に答える 7

88

次の例はソースの順序です。つまり、列 1 は HTML ソースの列 2 の前に表示されます。列が左または右に表示されるかどうかは、CSS によって制御されます。

固定右

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}
<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

左固定

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}
<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

別の解決策は、display: table-cellを使用することです。その結果、同じ高さの列になります。

于 2011-04-13T08:42:48.253 に答える
6

CSS:

#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}

HTML: 

<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>

上記は機能するはずです。幅を指定して中央に配置したい場合は、そのコードをラッパーに配置できます。overflow:hidden幅のない列には、横の列をラップしないように、垂直方向に含めるための鍵です(左右どちらでも可）

サポートが必要な場合は、IE6も#content div に設定する必要がある場合があります。zoom:1

于 2011-04-13T08:18:04.323 に答える
5

CSSソリューション

#left{
    float:right;
    width:200px;
    height:500px;
    background:red;   
}

#right{
    margin-right: 200px;
    height:500px;
    background:blue;
}

http://jsfiddle.net/NP4vb/3/で実際の例を確認してください

jQuery ソリューション

var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);

実際の例を確認してくださいhttp://jsfiddle.net/NP4vb/

于 2011-04-13T08:00:46.947 に答える