Html 使列的所有元素具有相同的宽度，不带“display:block”或“width”`

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

问题: 如何加宽较短的绿色方框，使其与最宽的绿色方框的宽度相匹配？以下是我希望看到的MSPaint格式副本：

我正在测试的浏览器 至少，我希望支持Internet Explorer 7、8和9。Firefox是可选的。我对支持其他浏览器不感兴趣

到目前为止我都试过了 我已经做了一些尝试来实现这一点，但我无法让它以我想要的方式工作。（如果接下来的部分很无聊，可以跳过。）

尝试1 我给了每个绿色块

display:block

样式，并删除了它们之间的

s

绿色框已成功调整大小！但是，现在每个红色框显示在其各自的绿色框下方，而不是右侧。我不知道是否有任何方法可以将红色框与

块

元素放在同一行，因此我放弃了这种方法

尝试2.0 我给了每个绿色框100%的宽度，并删除了它们之间的

s

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

绿色的盒子大小都一样，但是它们太宽了大约50像素，并且延伸到了黑盒子的末端

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

• 在IE7中，所有框都显示在一行上
• 在Firefox中，红色框显示在各自的绿色框下方

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

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

尝试2.2 从尝试2.1开始，我重新添加了

s

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

特定于浏览器的更新：

• 在IE7中，这些框显示在各自的行上，但它们的宽度不同
• Firefox仍然在错误的位置显示红色框。此外，相邻的绿色方框之间存在较大的间距

尝试2.3 从尝试2.2开始，我将宽度更改为99%

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

特定于浏览器的更新：

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

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

TL；博士

---

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

我简直不敢相信我将要写的东西，但为什么不使用一个好的老

？有2列3行，第二列包含红色框。。。这应该很容易做到。

我验证了这个演示在IE7+和现代浏览器中可以工作：

CSS:

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

.hoverBox{
位置：相对位置；
}
.可见部分{
显示：块；
边框：1px纯绿色；
填充物：5px；
空白：nowrap；
}
希登帕特先生{
显示：无；
边框：1px纯红；
位置：绝对位置；
左：100%；
排名：0；
空白：nowrap；
}
.hoverBox:hover>.hiddenPart{
显示：块；
}
.封箱{
边框：1px纯黑；
显示：内联块；
*显示：内联；
缩放：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>​

方框1
方框1的隐藏部分
框2比框1宽得多
方框2的隐藏部分
框3，
分为两行。
方框3的隐藏部分
​

表格不错，只是通常被误用了。我考虑过在这里使用表格。但是我所有的红盒子都是一样的宽度。与绿色盒子不同，红色盒子是独立的自由精灵，应该可以自由决定自己的宽度。哦，还有，如果红色盒子非常高，我不希望它相关的绿色盒子伸展。如果我使用表格，红细胞和绿细胞的高度会联系在一起。这种快速尝试有什么问题吗？（我完全基于你的模型）@thirtydot看起来像一个很好的。。。回答：）三十点，哇！这看起来正是我想要的。我甚至不知道左：100%是你可以做的事情。也许你应该把它作为一个答案。