Fix rechte und linke Spalte, dynamische Mittelsäule

Question

Ich versuche, eine dreispaltige Layout, in dem machen:

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

ich dies zur Arbeit zu kommen scheinen nicht. Hier ist, was ich bisher:

#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

Hier ist, was ich tun würde: Machen Sie Ihren Behälter, was Breite Sie es sein wollen, machen Sie Ihre linke und rechte Spalten, was Größe Sie wollen fixiert werden und dann geben die Behälter padding links und rechts je nach Breite der beiden Behälter. Der mittlere Behälter wird 100% der Breite des Behälters sein, der nun aufgrund der Polsterung schrumpft.

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

wenn Sie Schwimmer verwenden, Element floatting sollte in der Strömung ersten sein, dann kann statisch kommen sitzen dazwischen, wenn genügend Platz: Beispiel

#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

Da Bullshit IE-Versionen ziemlich gestorben, können Sie calcsafely verwenden. Flexbox ist ein bisschen tricky, aber Sie könnten darüber nachdenken.

Wie auch immer, mit calc, schweben Sie sie alle und geben Sie der mittleren Spalte eine dynamische Breite. Immer sachte.

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

Zur Kasse gehen 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; 
}