一个液体 div 和一个固定大小的 div答案

【问题标题】：one liquid div with one fixed size div一个液体 div 和一个固定大小的 div
【发布时间】：2010-02-25 23:57:29
【问题描述】：

我正在尝试构建一个具有固定宽度 div 和旁边的液体宽度 div 的布局：

<div id="main" style="width:100%; height:500px; background-color: #ccc;">
    <div id="right" style="float: right; width:100px; height:500px; background-color: red;">
    </div>
    <div id="left" style="float: right; width: auto; height:500px; background-color: orange;">
    </div>
</div>

左边的 div 没有填满它的宽度，当右边的 div 不存在时，我也希望这个 div 填满整个主 div，我该怎么做？

【问题讨论】：

标签： css html width liquid-layout fixed-width

【解决方案1】：

我觉得你想要的更像

<div id="main" ... >
  <div id="right" style="float: right; width: 100px;"> Will take up 100 px </div>
  <div id="left" style="margin-right: 100px;"> Will take up the rest </div>
</div>

【讨论】：

谢谢。它现在可以工作了，但是当我在这种方法中删除右 div 时，是否可以让左 div 宽度填充整个主 div？
@Datis：可能只有一个 javascript 事件，CSS 中没有 if/else 允许应用条件逻辑（除非它在 CSS3 中而且我还没有遇到过） .
所以在这种情况下我应该使用表格或者只是用单独的 HTML 文件编写另一个 css 规则？
“删除”是什么意思？如果您使用 Javascript 动态执行此操作，您还可以动态更改样式以在同一段代码中没有边距，正如@ricebowl 所说。但我不认为如果 DOM 以某种方式被修改，会有一个纯粹的 CSS 解决方案。
如果没有侧边栏，在服务端生成页面时跳过左侧div的style属性。这是最简单的解决方案，也是最强大的解决方案。