一个液体div与一个固定大小的div

Question

我正在尝试构建一个具有固定宽度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，我该怎么办？

Answer 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>