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

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

表格将是更简单的选择。您是否尝试过强制换行表格单元格？

td {
  word-wrap: break-word;
}

我认为没有一个纯粹的 CSS/HTML 解决方案可以满足您的DIV想法。