修正左右の列、動的な中央の列

Question

私は3列レイアウト作成しようとしている：私はこれが動作するように見えることはできません

left-column fixed width: 200px 
right-column fixed width: 300px 
center-column dynamic width; 

を。ここで私はこれまで持っているものです。

#one { 
    float:left; 
    background-color: red; 
    width: 300px; 
    height: 20px; 
} 

#two { 
    background-color: blue; 
    height: 20px; 
    margin: 0 200px 0 300px; 
} 

#three { 
    position: relative;    
    background-color: yellow; 
    width: 200px; 
    height: 20px; 
    float: right;    
} 

Answer 1

は、ここで私はどうなるのかです：、あなたはそれになりたいものは何でも幅あなたのコンテナを作成し、あなたがそれらを固定することが好きなサイズあなたの左と右の列を作り、その後与えます2つのコンテナの幅に応じて左右にコンテナpaddingがあります。中央のコンテナは、パディングのためにコンテナの幅の100％になります。

HTML

<div class="container"> 
    <div class="col"> 
     1 
    </div> 
    <div class="col"> 
     2 
    </div> 
    <div class="col"> 
     3 
    </div> 
</div> 

CSS

.container { 
    width:100%; 
    position:relative; 
    padding:0 300px 0 200px; 
    box-sizing:border-box; 
} 
.col:nth-of-type(1) { 
    width:200px; 
    position:absolute; 
    left:0; 
    top:0; 
    background-color:yellow; 
} 
.col:nth-of-type(3) { 
    width:300px; 
    position:absolute; 
    right:0; 
    top:0; 
    background-color:blue; 
} 
.col:nth-of-type(2) { 
    width:100%; 
    background-color:green; 
} 

https://jsfiddle.net/

Answer 2

あなたはfloatを使用し、要素は、フローの最初でなければなりませんfloatting、その後、静的であれば十分な部屋の間に座って来ることができます。 例

#one { 
 
    float: left; 
 
    background-color: red; 
 
    width: 300px; 
 
} 
 
#two { 
 
    background-color: blue; 
 
    overflow: hidden; 
 
} 
 
#three { 
 
    background-color: yellow; 
 
    width: 200px; 
 
    float: right; 
 
} 
 
/* demo purpose to show overflow purpose */ 
 
div { 
 
    margin:0 5px; 
 
    border:solid; 
 
}

<div id="one"> 
 
    1 i float .Run me full page too 
 
</div> 
 
<div id="three"> 
 
    3 i float 
 
</div> 
 
<div id="two"> 
 
    2 i'm there 
 
</div>

Answer 3

でたらめIEのバージョンはかなり死んだので、あなたはcalcsafelyを使用することができます。 Flexboxはビットtrickyですが、それを考慮することもできます。

とにかく、calcで、それらをすべて浮動させて中央の列に動的な幅を与えます。ゆっくりやれ。

.col-1 { float: left; width: 200px; } 
.col-2 { float: left; width: calc(100% - 200px - 300px); } 
.col-3 { float: left; width: 300px; } 

チェックアウトthis fiddle。

Answer 4

HTML：

<div class="container"> 
    <div class="left"></div> 
    <div class="right></div> 
    <div class="center">Content Goes Here</div> 
</div> 

CSS：

.container { 
    width: 100%; 
} 
.left { 
    width: 200px; 
    float: left; 
} 
.right { 
    width: 300px; 
    float: left; 
} 
center { 
    display:block; 
    margin-left:auto; 
    margin-right: auto; 
}