內聯和固定CSS布局

Question

我有以下布局...

綠色元素向下重復（它們是網絡應用的圖塊）。

紅色列是具有固定寬度的div，粉紅色元素也具有固定的大小。 藍色元素用在其他地方，通常只用綠色代替紅色盒子中的顏色-但是在特殊的用例下，我們需要在側面出現一個選項面板（粉紅色的東西）。 因此，藍色元素基本上是一個普通的舊div，沒有浮動，沒有類似的東西。

每當我添加粉紅色元素時，它就會出現在藍色下方。 因此，我將藍色和粉紅色都切換為嵌入式塊，問題是藍色不再增長以填充多余的空間。 所以我很茫然。

假設紅色div無法更改，我該怎么做？ 謝謝！

PS：我不需要完整的代碼答案，只需將我指向正確的方向，然后我將填寫點。

Answer 1

嘗試這個

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>