html - 使列的所有元素具有相同的宽度，没有 `display:block` 或 `width`

Question

我有一个网页，其中有三个绿色框，每个都在自己的行上。每个绿色框还有一个关联的红色框，当您将鼠标悬停在绿色框上时会出现。所有的绿色框都包含在一个黑框内，该黑框的宽度刚好可以容纳最宽的绿框。

JSFiddle

问题

如何加宽较短的绿色框，使其与最宽的绿色框的宽度相匹配？这是我希望看到的 MSPaint 再现：

我正在测试的浏览器

至少，我想支持 Internet Explorer 7、8 和 9。Firefox 是可选的。我对支持任何其他浏览器不感兴趣。

到目前为止我尝试过的

我已经做了一些尝试来实现这一点，但我无法让它按照我想要的方式工作。（如果它们很无聊，请随意跳过接下来的部分。）

尝试 1

我给每个绿色块都设置了display:block样式，并删除了<br/>它们之间的 s。

JSFiddle

绿色框已成功调整大小！但是，现在每个红色框都出现在其各自的绿色框下方，而不是右侧。不知道有没有办法把红框和block元素放在同一行，所以放弃了这种做法。

尝试 2.0

我给每个绿色框设置了 100% 的宽度，并删除了<br/>它们之间的 s。

JSFiddle

（忽略绿色和红色框之间的间隙。那是因为两个跨度之间有空白，并且易于修复。）

绿色盒子的大小都一样，但它们的宽度大约为 50px，并且超出了黑色盒子的末端。

其他特定于浏览器的问题：

• 在 IE7 中，这些框都出现在一行上。
• 在 Firefox 中，红框出现在各自的绿框下方。

尝试 2.1

从尝试 2.0 开始，我删除了绿色框的填充。填充是一个非常强大的“拥有它会很好”的功能，但如果真的没有办法拥有它，我会放弃它。

JSFiddle

绿色的盒子比黑色盒子的末端延伸了 1px，这很烦人，但不是不可接受的。箱子还是太宽了。2.0 中的所有特定于浏览器的问题仍然有效。

尝试 2.2

从尝试 2.1 开始，我重新添加了<br/>s。

JSFiddle

绿色框是正确的宽度，给或取一个像素！

特定于浏览器的更新：

• 这些框在 IE7 中出现在自己的行中，但它们的宽度并不完全相同。
• Firefox 仍然在错误的位置显示红色框。此外，相邻的绿箱之间也有很大的差距。

尝试 2.3

从尝试 2.2 开始，我更改width为 99%。

JSFiddle

绿色盒子比黑色盒子短一点，可以接受。只要它们的宽度相同。

特定于浏览器的更新：

• 在 IE7 中，框的宽度仍然不同。
• Firefox 运行良好。

所以我现在有 75% 的浏览器兼容性。然而，似乎任何调整都无法让 IE7 正常工作，所以我放弃了这种技术。

TL;博士

调整框的大小以适应列通常并不太难。但是，当框具有固定像素宽度的填充和必须出现在其右侧的绝对定位的兄弟时，常规方法会失败。我正在寻找一种在这些特殊情况下有效的方法。

Answer 1

I verified that this demo works in IE7+ and modern browsers:

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>​

Answer 2

我简直不敢相信我要写的东西，但为什么不使用一个好的旧的<table>呢？有 2 列和 3 行，第二列包含你的红色框......这应该很容易做到。