CSS中关于px和百分比宽度混合的简单问题？[带图片]

Question

3

我来帮忙翻译：

我有一个小问题： enter image description here

如何设置第二个盒子的宽度以填充所有空间，包括橙色盒子？

谢谢

HTML：

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

CSS：

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

即使橙色盒子和蓝色盒子在不同页面上大小不同，它们也必须相同，如果可能的话保持像素完美。

- Totty.js

1

你需要展示你的元素的HTML结构。 - Matt

你需要支持IE7吗？ - thirtydot

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Victor Nicollet · Accepted Answer

最简单的解决方案使用以下标记：

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