響應式CSS方法

Question

下圖是我試圖獲得什麼的例證。第一個數字代表較長的寬度，第二個數字代表較短的寬度。 所有的紅色塊都停留在右側和左側位置，黃色塊應該跟隨容器的寬度。

1：http://i.stack.imgur.com/6bHTo.jpg

繼承人我目前的做法

/* the one with black border :) */ 
.container{ 
    position: relative; 
} 
/* red blocks have auto heights depends on its content */ 
.red{ 
    position: absolute; 
    top: 0; 
    width: 100px; 
} 
.red-left{ 
    left:0; 
} 
.red-right{ 
    right:0; 
} 
/* yellow block follow the width of the container but should leave spaces for the left and right */ 
.yellow{ 
    margin: 0 110px; 
} 

林幾乎滿意然而這種方法，我注意到，當紅色塊都小於容器越高，容器犯規自動跟隨其內容的高度。我明白，它不可能自動調高容器，因爲孩子們的位置是絕對的。 :)

Answer 1

也許可以幫助：

HTML

<div class="container"> 
    <div class="red red-left">red-left<br>red-left<br>red-left</div> 
    <div class="yellow">yellow<br>yellow</div> 
    <div class="red red-right">red-right</div> 
</div> 

CSS

/* the one with black border :) */ 
.container{ 
    position: relative; 
} 
/* red blocks have auto heights depends on its content */ 
.red{ 
    position: absolute; 
    top: 0; 
    width: 100px; 
    background:red; 
    height:auto 
} 
.red-left{ 
    left:0; 
} 
.red-right{ 
    right:0; 
} 
/* yellow block follow the width of the container but should leave spaces for the left and right */ 
.yellow{ 
    margin: 0 110px; 
    background:yellow 
} 

DEMO

Answer 2

My Own Demo to make it easier.

我們可以在這裏看到的是內容overlapsed容器。

Answer 3

你有沒有考慮使用CSS3 Flex Box？它會是這樣的：

HTML：

<div class="container"> 
    <div class="red red-left">red-left<br>red-left<br>red-left<br>red-left<br>red-left</div> 
    <div class="yellow">yellow<br>yellow</div> 
    <div class="red red-right">red-right</div> 
</div> 

和CSS：

.container{ 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 

    display: -moz-box; 
    -moz-box-orient: horizontal; 

    display: box; 
    box-orient: horizontal;   
} 

.red{ 
    background-color:red; 
    width:100px; 
} 

.yellow{  
    background-color:yellow; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
} 

看看這個小提琴：

http://jsfiddle.net/lucaslazaro/sjYNy/

編輯：

要了解更多關於Flex箱我推薦這個快速教程：http://www.html5rocks.com/pt/tutorials/flexbox/quick/

Answer 4

使用：

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

div > div { 
    display: table-cell; 
} 

審查全碼：

http://jsfiddle.net/BF6La/