CSS并排div与Pixel和百分比宽度

Question

我在父div中有两个div(并排),我希望右div占据剩余空间的100%(即100% - 200px)并且应该始终保持在左边div(不在左边div之下):

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>

Answer 1

由于您只有一个固定宽度的列,因此将其向左浮动即可.至于第二列,不要指定浮点数和宽度; 这确保它是100%宽.但是你必须添加左边距; 否则第二列将干扰浮动柱,例如

• 浅绿色背景将出现在蓝色背景后面(关闭蓝色背景,看看我的意思)
• 如果第二列变得比第一列高,则其他内容将开始出现在第一列下方.

<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>