web-dev-qa-db-ja.com

流動的な左列と固定右列を含む2列divレイアウト

DIVを使用して2列のレイアウトを作成します。右列には200pxの固定幅があり、左列には残っているすべてのスペースが使用されます。

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

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

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

htmlcssfluid-layout
50
Silver Light

次の例はソース順に並べられています。つまり、HTMLソースでは列1が列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 ;を使用することですその結果、列の高さが等しくなります。

88
Salman A

ここに解決策があります（それにいくつかの癖がありますが、気づいたかどうか、懸念されていることをお知らせください）：

<div>
    <div style="width:200px;float:left;display:inline-block;">
        Hello world
    </div>
    <div style="margin-left:200px;">
        Hello world
    </div>
</div>
12
leetNightshade

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 mightサポートが必要な場合は、＃content divにもzoom:1設定が必要です

6
clairesuzy

CSSソリューション

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

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

http://jsfiddle.net/NP4vb/3/ で動作例を確認してください

jQuery Solution

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

動作例を確認してください http://jsfiddle.net/NP4vb/

5
Hussein

私は最近、CSSを使用した液体レイアウトのこのWebサイトを見せられました。 http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts （以下のリンクのデモページをご覧ください） 。

著者は現在、固定幅レイアウトの例を提供しています。チェックアウト; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width 。

これにより、次の例が提供されます。 http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm （あなたのような2列のレイアウトの場合は、私は思う後です）

http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm （3列レイアウトの場合）。

このサイトへのリンクがたくさんありすみませんが、素晴らしいリソースだと思います。

1
Mr Moose

これは簡単な答えだと思います、これは親の幅に基づいてそれぞれ50％の子開発者を分割し​​ます。

 <div style="width: 100%">
        <div style="width: 50%; float: left; display: inline-block;">
            Hello world
        </div>
        <div style="width: 50%; display: inline-block;">
            Hello world
        </div>
    </div>
1
Anju313