2

三个元件位于流体容器内，配置如下：

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

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

当容器的宽度为奇数像素时，行的右边缘不对齐，这是由于在计算元素 A 和 B 的宽度时进行了舍入。您可以在调整框架大小时观察边缘未对齐和重新对齐。当第一行包含多于两个的元素（例如十）时，效果会更加严重。

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

4

1 回答 1

2

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

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

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

于 2011-07-13T15:08:55.727 回答