css - 两个盒子各占 50% 的宽度

Question

我有这个代码:

<div style="margin: 0px; padding: 0px;">

<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; left: 0; margin-bottom: 10px; position: relative;">
....
</div>

<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; right: 0; margin-bottom: 10px; position: relative;">
....
</div>

</div>

我的最终目标是让两个盒子各占 50% 的宽度，并且它们之间有边距。

相反，它们显示在彼此下方，这是我不想要的。他们似乎不尊重他们指定的位置值。 (我什至将两者的宽度都设置为 40%，所以这不是所有空间使用的问题。)

供引用:我选择不使用 float ，因为我不希望它们在彼此下方重新对齐。我选择不使用表格显示，因为我想要 IE7 兼容性。我从来没有做过太多的 CSS，所以我的问题希望很容易解决(交叉手指)

Answer 1

正如其他人所提到的，您缺少 float: left(删除 top/right/bottom/left 值)或 position: absolute。

如果您希望宽度可变但填充固定(反之亦然)，那么您需要 width: 50% 和 box-sizing: border-box .这使得填充成为 50% 的一部分。

如果您希望宽度和内边距都流畅，则不需要此技巧。只需对两者使用百分比测量值，这样总计为 50%(例如，width: 48%; padding: 1%)。