提问人：Kevin 提问时间：11/8/2012 更新时间：11/8/2012 访问量：149
使列的所有元素具有相同的宽度，而不使用“display：block”或“width”
Make all elements of a column the same width, without `display:block` or `width`
问：
我有一个网页，它有三个绿色框，每个框都有自己的行。每个绿色框还有一个关联的红色框，当您将鼠标悬停在绿色框上时会出现该红色框。所有绿色框都包含在一个黑框中，该黑框的宽度刚好足以容纳最宽的绿色框。
问题
如何加宽较短的绿色框，使其与最宽的绿色框的宽度相匹配？以下是我希望看到的 MSPaint 演绎：
我正在测试的浏览器
我至少希望支持 Internet Explorer 7、8 和 9。Firefox 是可选的。我对支持任何其他浏览器不感兴趣。
到目前为止我尝试过什么
我已经尝试过几次来实现这一点，但我无法让它按照我想要的方式工作。（如果它们很无聊，请随时跳过这些下一部分。
尝试 1
我给每个绿色块指定了样式，并删除了它们之间的 s。display:block<br/>
绿色框已成功调整大小！但是，现在每个红色框都显示在其各自的绿色框下方，而不是右侧。我不知道有没有办法将红色框与元素放在同一行上，所以我放弃了这种方法。block
尝试 2.0
我给每个绿色框的宽度为 100%，并删除了它们之间的 s。<br/>
（忽略绿色和红色框之间的间隙。这是因为两个跨度之间有空白，并且易于修复。
绿色框的大小都相同，但它们的宽度约为 50px，并且它们延伸到黑框的末端。
其他特定于浏览器的问题：
- 在 IE7 中，这些框都显示在一行上。
- 在 Firefox 中，红色框显示在各自的绿色框下方。
尝试 2.1
从尝试 2.0 开始，我删除了绿色框的填充。填充是一个非常强大的“拥有它会很好”的功能，但如果真的没有办法拥有它，我会放弃它。
绿色框在黑框的末端延伸 1px，这很烦人，但并非不可接受。盒子还是太宽了。2.0 中所有特定于浏览器的问题仍然有效。
尝试 2.2
从尝试 2.1 开始，我重新添加了 s。<br/>
绿色框的宽度是正确的，给或拿一个像素！
特定于浏览器的更新：
- 在 IE7 中，这些框出现在它们自己的行上，但它们的宽度并不完全相同。
- Firefox仍然在错误的位置显示红色框。此外，相邻的绿色盒子之间有很大的间隙。
尝试 2.3
从尝试 2.2 开始，我更改为 99%。width
绿色盒子比黑盒子短一点，这是可以接受的。只要它们的宽度相同。
特定于浏览器的更新：
- 在 IE7 中，框的宽度仍然不同。
- Firefox运行良好。
因此，在这一点上，我有75%的浏览器兼容性。但是，似乎任何调整都不会使IE7正常工作，因此我放弃了这种技术。
TL的;博士
调整框的大小以适合列通常不会太困难。但是，当框具有固定像素宽度的填充和必须出现在其右侧的绝对定位的同级时，正常方法会失败。我正在寻找一种在这些特殊情况下有效的方法。
答：
1赞
Jean
11/8/2012
#1
我简直不敢相信我要写的东西，但为什么不使用一个好的旧？有 2 列和 3 行，第二列包含您的红色框......这应该很容易做到。<table>
评论
3赞
samuel.molinski
11/8/2012
表格还不错，只是一般被误用了。
0赞
Kevin
11/8/2012
我想过在这里使用表格。但是，我所有的红色框的宽度都是一样的。与绿色盒子不同，红色盒子是独立的自由精神，应该可以自由决定自己的宽度。
0赞
Kevin
11/8/2012
哦，还有，如果一个红色的盒子很高，我根本不希望它相关的绿色盒子被拉伸。如果我使用表格，红色和绿色单元格的高度将绑定在一起。
2赞
thirtydot
11/8/2012
#2
我验证了此演示是否适用于 IE7+ 和现代浏览器：
http://jsfiddle.net/thirtydot/APVuq/4/
CSS格式：
.hoverBox {
position: relative;
}
.visiblePart {
display: block;
border: 1px solid green;
padding: 5px;
white-space: nowrap;
}
.hiddenPart {
display: none;
border: 1px solid red;
position: absolute;
left: 100%;
top: 0;
white-space: nowrap;
}
.hoverBox:hover > .hiddenPart{
display: block;
}
.enclosingBox {
border: 1px solid black;
display: inline-block;
*display: inline;
zoom: 1;
}
HTML格式：
<div class="enclosingBox">
<div class="hoverBox">
<span class="visiblePart">
Box 1
</span>
<span class="hiddenPart">
Hidden part of Box 1
</span>
</div>
<div class="hoverBox">
<span class="visiblePart">
Box 2, which is much wider than box 1
</span>
<span class="hiddenPart">
Hidden part of Box 2
</span>
</div>
<div class="hoverBox">
<span class="visiblePart">
Box 3, which <br/> is split into two lines.
</span>
<span class="hiddenPart">
Hidden part of Box 3
</span>
</div>
</div>
评论
left: 100%;