html - 可重新排列的固定(两个)和流动(一个)元素

Question

我正在尝试创建一个包含 3 个元素的布局，其中两个具有固定宽度，第三个将占据父元素的其余宽度。

(1): fixed-fluid-fixed 流体有 2 个 div，一个在中间流体 div 内向左浮动，另一个向右浮动。

(2):如果我将固定的 div 并排放置，它应该看起来像这样。 固定固定流体。

(3):如果删除了其中一个fixed-div，则fluid div应填充空白区域以形成fluid-fixed

(4):同样，如果去掉后面的fixed-div，fluid应该填充这个空间，变成如图所示的fixed-fluid布局。

我尝试过的: http://jsfiddle.net/nagendra_rao/28QUr/ (问题是，我无法重新排列 div)

我不想使用 js，我相信这可以通过使用 html-css 来实现。

Answer 1

可以设置2个或更多<div>就像这些:

<div id="left_column_200px">
    <!-- content -->
</div>
<div id="column_100%_of_remaining>
    <!-- content -->
</div>

#left_column_200px {
    width: 200px; height: auto; overflow: hidden;
    position: absolute; top: 0; left; 0;
    z-index: 2;
}
#column_100%_of_remaining {
    width: auto; max-width: 100%; height: auto; overflow; hidden; padding-left: 200px;
    float: left;
    z-index: 1;
}

这应该有效。