css - 根据最大div设置div宽度

Question

我有一组 5 个 div，都具有自动宽度。

文本将动态插入到每个 div 中，我想将所有 div 的宽度更改为 5 个中最大的一个。

有什么想法吗？

.box {
  display: inline-block;
  border: 1px solid #eaeaea;
}

<div class="box">Hi</div>
<div class="box">Hi John</div>
<div class="box">Hello John</div>
<div class="box">Hello John Doe</div>

我想我应该使用 JS，但我想知道是否可以避免它。

Answer 1

我会使用 javascript:

function setWidth(e,w) {
    e.setAttribute("style","width:"+ w +"px");
    e.style.width= w +'px';
}
var boxes = document.getElementsByClassName("box");
var max = 0;
for (var i = 0; i < boxes.length; i++) {
    var width = boxes[i].clientWidth;
    if (width > max) max = width;
}
for (var i = 0; i < boxes.length; i++) {
    setWidth(boxes[i],max);
}