使列的所有元素具有相同的宽度，而不使用`display：block`或`width`

Question

我有一个网页，其中有三个绿色框，每个框都有自己的行。每个绿色框还有一个相关的红色框，当您将鼠标悬停在绿色框上时会出现该框。所有的绿色盒子都装在一个黑盒子里，盒子宽度足以容纳最宽的绿色盒子。

JSFiddle

问题

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

我正在使用

进行测试的浏览器

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

我到目前为止所做的事

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

尝试1

我为每个绿色块添加了display:block样式，并删除了它们之间的<br/>。

JSFiddle

绿色框已成功调整大小！但是，现在每个红色框在下面显示其各自的绿色框，而不是右边。我不知道是否有办法将红色框放在与block元素相同的行上，所以我放弃了这种方法。

尝试2.0

我给每个绿色框的宽度为100％并删除它们之间的<br/>。

JSFiddle

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

绿色盒子的大小都相同，但是它们的宽度大约是50px，它们会延伸到黑盒子的末端。

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

• 在IE7中，这些框全部显示在一行上。
• 在Firefox中，红色框出现在各自的绿色框下方。

尝试2.1

从Attempt 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; DR

调整框以适应列通常不是太困难。但是，当盒子具有固定像素宽度的填充和绝对定位的兄弟姐妹必须出现在他们的右边时，常规方法会失败。我正在寻找一种在这种特殊情况下可行的方法。

Answer 1

我确认此演示适用于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>​

Answer 2

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