css - 关于 CSS、px 和百分比宽度混合的简单问题？! [带图]

Question

我有这个小问题:

如何设置第二个框的宽度以填充所有空间，算上橙色框？

谢谢

HTML:

 <div class="parent"><div class="orange"></div><div class="blue"></div></div>

CSS:

 .parent{width:100%;} .orange{width:100px;}

橙色框和蓝色框必须相同，即使它们在页面之间的大小不同，尽可能完美像素。

Answer 1

最简单的解决方案使用此标记:

<div class="complete">
  <div class="orange"></div>
  <div class="blue"></div>
</div>

你希望 .complete 和 .blue 是非 float block 元素，这将导致它们占用尽可能多的宽度，但你还需要 .orange float 以便与 .blue 位于同一行并防止 .blue 通过使用隐藏的溢出来重叠它。

.complete { overflow : hidden }
.orange   { float : left ; width : 100px }
.blue     { overflow : hidden } 

如果您需要在橙色和蓝色之间留出一个小空间，请在橙色框上添加右边距。

请注意，使用此解决方案，蓝色和橙色框将具有不同的高度。如果您的图形效果(例如背景)要求框具有相同的高度，您将需要更聪明的 CSS。