2017-09-28 4 views
-1

J'ai un groupe de 5 div s, tous avec la largeur automatique.set div largeur selon le plus grand div

Le texte sera inséré dynamiquement dans chaque div et je veux changer tout div de largeur à la plus grande des 5.

Toutes les idées?

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

Je pense que je devrais utiliser JS, mais je me demande s'il est possible de l'éviter.

+0

Imaginez, ils vont changer. Sinon, fournissez-nous un code que vous avez écrit afin que nous puissions voir et comprendre plutôt qu'imaginer. –

+1

Veuillez inclure un [exemple minimal, complet et vérifiable] (https://stackoverflow.com/help/mcve) avec le code que vous avez déjà essayé vous-même. Ce n'est pas un service de codage ou de tutorat. Les questions doivent montrer ** des preuves de recherche et des tentatives pour résoudre le problème vous-même **, un aperçu clair de votre problème spécifique de codage, et le code pertinent. Voir: [Comment poser une bonne question] (https://stackoverflow.com/help/how-to-ask). – FluffyKitten

+0

... probablement un duplicata de https://stackoverflow.com/questions/42656183/how-to-set-flex-items-to-equal-width-according-to-the-item-with-the-longest- cont/42659167 sauf si vous voulez les empiler ... –

Répondre

0

J'utiliser 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); 
}