css - 3 列のレイアウト... 左 (固定 px)、中央 (50%)、右 (50%)

Question

左の列を40pxにしたい。中央の列を残りのビューポートの 50% にし、右の列を残りのビューポートの残りの 50% にしたいと考えています。

次のようになります。

[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]

ここに示す解決策 (リンク) は、モバイル デバイスでは中央の列が折りたたまれすぎる可能性があるため、私の場合には機能しません。

ありがとう！

Answer 1

私はこれがあなたのために働くかもしれないと思います：

http://jsfiddle.net/KR9zj/

基本的には、LEFTCOLUMN をフロートさせ、CENTERCOLUMN と RIGHTCOLUMN の両方をoverflow: hidden.

Answer 2

とを使用display:table;しdisplay:table-cell;ます。と格闘する必要はありませんfloat:x;。

HTML:

<div id='container'>
    <div id='first'>a</div>
    <div id='second' class='fifty'>b</div>
    <div id='third' class='fifty'>c</div>
</div>​

CSS:

#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }

実際の例: http://jsfiddle.net/j25wK/

Answer 3

これは機能しますか？

デモ： http： //jsfiddle.net/BVhCZ/

ご覧のとおり、左側は絶対値であり、「残り」は2つの50％フロート子を含む1つのブロックdivです。〜40px以上の任意の幅で動作するはずです

コード：

<div class="left">LEFT</div>
<div class="content">
    <div class="content-left">CONTENT LEFT</div>
    <div class="content-right">CONTENT RIGHT</div>
</div>

.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;    
    background-color: #ddd;
}
.content {
    margin-left: 40px;    
}
.content .content-left {
    float: left;
    width: 50%;
    clear: none;
    background-color: #fdd;
}
.content .content-right {
    float: right;
    width: 50%;
    clear: none;   
    background-color: #ddf;
}