Question

以下配置中的三个元素位于流体容器内：

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

元素A和B的宽度为50％。元素C的宽度为100％。您可以看到实时示例here。

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

相反，我希望元素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/。

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

1 个答案: