html - 具有像素和百分比宽度的 CSS 并排 div

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

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

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

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