简单qst关于CSS，px和百分比宽度混合？ [带图片] [英] Simple qst about CSS, px and percentage width mix?! [with image]

问题描述

我有这个小问题：

如何在第二个框上设置宽度以填充所有空间，以橙色框为单位计数？

How do I set the width on the second box in order to fill all the space, counting with the orange box?

感谢

HTML：

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

CSS：

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

推荐答案

>橙色和蓝色框必须相同，即使它们的大小在页面之间不同，

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

The simplest solution uses this markup:

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

您要 .complete 和 .blue 为非浮动块元素，这将使它们尽可能多地使用宽度，但您还需要 .orange 浮动，以便与 .blue 在同一行上，并阻止 .blue 隐藏溢出。

You want .complete and .blue to be non-floating block elements, which will cause them to use up as much width as possible, but you also need .orange to float in order to be on the same line as .blue and prevent .blue from overlapping it by using a hidden overflow.

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

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

Note that with this solution, the blue and orange boxes will have different heights. If you have graphical effects (such as backgrounds) that require boxes to have the same height, you will need more clever CSS.

这篇关于简单qst关于CSS，px和百分比宽度混合？ [带图片]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！