css - 内联和固定的 CSS 布局

Question

我有以下布局...

绿色元素向下重复（它们是 Web 应用程序的图块）。

红色列是一个固定宽度的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>