使列的所有元素都具有相同的宽度，而不需要“显示:区块”或“宽度”

Question

我有一个网页，其中有三个绿色的盒子，每个在自己的线上。每个绿色框也有一个关联的红色框，当您悬停在绿色框上时，红色框就会出现。所有的绿色盒子都包含在一个黑匣子里，这个黑匣子的宽度足以容纳最宽的绿色盒子。

JSFiddle

​

​

问题

如何扩大较短的绿色框，使其与最宽的绿色框的宽度相匹配？这里是我希望看到的内容的MSPaint表示：

​

​

我正在测试的浏览器

至少，我希望支持7、8和9。Firefox是可选的。我不想支持任何其他浏览器。

到目前为止我尝试过的

我做了一些尝试来达到这一点，但我不能让它按照我想要的方式工作。(如果接下来的部分无聊的话，可以跳过这些部分。)

尝试1

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

JSFiddle

​

​

绿色盒子被成功地调整了大小！然而，现在每个红色方框都出现在各自的绿色框下面，而不是在右边。我不知道是否有任何方法将红色框放在与block元素相同的行上，所以我放弃了这种方法。

尝试2.0

我给每个绿色的盒子一个100%的宽度，并删除他们之间的<br/>s。

JSFiddle

​

​

(忽略绿色和红色方块之间的空隙。这是因为这两个跨度之间有空格，而且很容易修复。

绿色的盒子都是一样大小的，但是它们太宽了大约50便士，并且超过了黑匣子的末端。

其他浏览器特有的问题：

• 在IE7中，所有的框都出现在一行上。
• 在Firefox中，红色框出现在各自的绿色框下面。

企图2.1

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

JSFiddle

​

​

绿框的长度为1/x，超过了黑匣子的末尾，这是烦人的，但也不是不可接受的。箱子还是太宽了。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>呢？有两列三行，第二列包含你的红色方框.那应该很容易做到的。