divの幅を最大のdivに設定します

Question

私は5 divのグループを持っています。すべて自動幅です。

テキストは各div要素の中に動的に挿入され、私は5

任意のアイデアの中で最大に全てdivの幅を変更したいですか？

.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); 
}