关于CSS，px和百分比宽度混合的简单qst？！ [带图片]

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是非浮动块元素，这将导致它们尽可能多地使用宽度，但您还需要.orange按顺序浮动与.blue位于同一行，并使用隐藏的溢出阻止.blue重叠它。

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

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

请注意，使用此解决方案，蓝色和橙色框将具有不同的高度。如果你有需要盒子高度相同的图形效果（如背景），你需要更聪明的CSS。