css - 将元素的宽度设置为 sibling 的组合宽度？

Question

三个元素在以下配置的流体容器中:

+-----------------+
| +-----+ +-----+ |
| |  A  | |  B  | |
| +-----+ +-----+ |
| +-------------+ |
| |      C      | |
| +-------------+ |
+-----------------+

元素A和B的宽度为50%。元素 C 的宽度为 100%。你可以看到一个活生生的例子here .

当容器的宽度为奇数个像素时，由于在计算元素 A 和 B 的宽度时四舍五入，行的右边缘不对齐。您可以在调整框架大小时观察边缘不对齐和重新对齐.当顶行包含两个以上的元素时，效果会加剧，比如 ten .

相反，我希望元素 C 的宽度等于元素 A 和 B 的组合实际宽度，而不是组合百分比宽度。如果不使用 JavaScript 或求助于表格，这可能吗？

Answer 1

一个解决方案是让第一个元素向左浮动，为其指定所需的宽度。右边的不会 float ，并且有一个默认宽度，允许它拉伸(stretch)，填充左边留下的空间。请参阅对您的示例的修改以了解它的工作原理:http://jsfiddle.net/QDVeD/12/ .基础知识可以总结为:

#left {
  float: left;
  width: 50%;
  height: 50px;
}
#right {
  height: 50px;
}

不过，对于超过两个的元素，这不会像您希望的那样扩展。最后一个元素通常比其他元素稍长:http://jsfiddle.net/QDVeD/18/ .