CSS - 可以實現這種流體佈局嗎？

Question

所以我想在這裏實現的是讓紅框固定寬度，比如400px，它在頁面上水平居中。紅色框的任何一邊都是一個綠色框和一個寬度可變的淡紫色盒子，可以水平填充窗口的其餘部分，並且可以適應窗口大小。

因此，在一個更大的顯示器上，綠色和淡紫色的盒子將被水平拉伸，並且頁面中間的紅色框將保持相同的寬度。

解決方案需要在IE 8及更高版本中工作，儘管我對只能在IE9 +上運行的解決方案感興趣。

Answer 1

I created this quick JSFiddle hack for you.

基本上，我們讓這三個div的浮動彼此相鄰，給中間一固定的寬度，並使用其它兩個以下標記：

width:50%; 
padding-left: 150px; 
margin-left: -150px; 
box-sizing: border-box; 

和

width:50%; 
padding-right: 150px; 
margin-right: -150px; 
box-sizing: border-box; 

其中150等於中間div寬度的一半。

Answer 2

您可以使用calc來解決這個問題：

HTML：

<div class="green"></div> 
<div class="red"></div> 
<div class="lilac"></div> 

CSS：

html, body { 
    width: 100% 
} 

.green { 
    width: calc((100% - 400px)/2); //takes the total space, minus the red box space, divided by two. 
    height: 200px; 
    background: green; 
    float: left; 
} 

.red { 
    width: 400px; 
    height: 200px; 
    background: red; 
    float: left; 
} 

.lilac { 
    width: calc((100% - 400px)/2); 
    height: 200px; 
    background: lavender; 
    float: left; 
} 

概念證明：http://jsfiddle.net/yERs7/

Answer 3

您可以使用display: table，有充分的即使與兼容，因爲你問

例如在codepen：http://codepen.io/anon/pen/emCFy/

---

標記：

<div> 
    <section style="background: #91ee93"> 
    Green</section> 
    <section style="background: #ee8c8f" role="main"> 
    Red</section> 
    <section style="background: #e48fec"> 
    Pink</section> 
</div> 

的CSS

div { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

section { 
    display: table-cell; 
} 

section[role] { 
    width: 400px; 
}