html - 根据最宽的元素使所有元素的宽度相等

Question

这种行为可以使用表格来实现，就像这段代码:

<style>
table {
    table-layout:fixed;
    width:100%;
}
td {border:1px solid red;}
</style>
<table>
<tr>
    <td>Hello</td>
    <td>WWWWWWWWWWWWWWWWWWWWWW</td>
</tr>
</table>

这将是我想要的输出:

|Hello               |WWWWWWWWWWWWWWWWWWWWWW|

但是如果不适合屏幕宽度，此解决方案不会将内部元素(在本例中为 tds)换行!所以我想使用 div 和 css 来做到这一点。如果我使用:

<style>
#eq > div {
    width: 400px;
    float: left;
}
</style>
<div id="eq">
    <div>Hello</div>
    <div>WWWWWWWWWWWWWWWWWWWWWW</div>
</div>

当然它可以工作并且输出相同，但当然#eq 中的文本和元素数量是可变的!因此，如果文本“WWWWWWWWWWWWWWWWWWWWWW”将更改为“lol”，元素将变得非常宽。另一方面，如果我将它更改为更长的文本然后定义宽度，则所有其他较小元素的宽度将更小。所以最后的问题是:如何使用纯 html 和 css 使所有元素的宽度与最宽的元素一样宽，并且无需手动指定宽度？

Answer 1

表格将是更简单的选择。你试过了吗forcing wrap在表格单元格上？

td {
  word-wrap: break-word;
}

我认为您的 DIV 想法没有纯 CSS/HTML 解决方案。