将元素的宽度设置为兄弟元素的组合宽度？

Question

流体容器内有三个元件，其配置如下：

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

元件 A 和 B 的宽度为 50%。元素C的宽度为100%。您可以在此处查看实例。

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

相反，我希望元素 C 的宽度等于元素 A 和 B 的实际宽度之和，而不是百分比宽度之和。这是否可以在不使用 JavaScript 或求助于表格的情况下实现？

Answer 1

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

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

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