內聯和固定CSS佈局

enter image description here

的綠色元素向下地重複（他們對於網絡的應用程序磚）。

紅色的列是固定寬度的div，粉紅色的元素也有固定的大小。藍色元素用於其他地方，通常只是取代綠色坐在紅色的盒子中 - 但在特殊的使用情況下，我們需要一個選項面板出現在側面（粉紅色的東西）。所以基本上藍色的元素是一個普通的舊的div，沒有浮動，沒有這樣的。

每當我添加粉紅色的元素，它會出現在藍色下面。所以我把藍色和粉紅色都換成了內嵌塊，問題是藍色不再增長以填充額外的空間。所以我很茫然。

我該怎麼去做這件事，假設紅色的div不能改變？謝謝！

P.S.我不需要一個完整的代碼答案，只需指向正確的方向，然後填寫點。

來源

2013-07-24 Cody Smith

試試這個

http://jsfiddle.net/mQN9Z/2/

CSS

.container { 
    width: 100%; 
    display: Table; 
    background-color: black; 
    height: 400px; 
    padding: 10px; 
} 
.left { 
    display: Table-cell; 
    background-color: #0054A6; 
    width: 70%; 
} 
.right { 
    display: Table-cell; 
    background-color: #EC008C; 
    width: 30%; 
}

HTML

<div class="container"> 
<div class="left">left</div> 
<div class="right">right</div> 
</div>

來源

2013-07-24 11:49:43 falguni

你釘它的人，我萬塔請你喝一杯！ –

現在我的更新回答http://jsfiddle.net/mQN9Z/3/ – falguni

非常好，只是等待給你答案。 –

內聯和固定CSS佈局

回答

相關問題