Je veux créer cette mise en page:
Lorsqu'un élément ne rentre pas dans le conteneur, nous pouvons passer à la ligne suivante:
Lorsque le conteneur est plus petit que l'élément plus large, nous pouvons envelopper le contenu en plusieurs lignes
C'est très facile avec Javascript, voici l'exemple https://jsfiddle.net/oucxsep4/ .
var choices = document.querySelectorAll('li');
var maxWidth = 0;
// read
for (i = 0; i < choices.length; ++i) {
maxWidth = Math.max(maxWidth, choices[i].offsetWidth)
};
// write
for (i = 0; i < choices.length; ++i) {
choices[i].style.width = maxWidth + "px";
};
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
background: red;
float: left;
margin: 5px;
}
<ul>
<li>first choice</li>
<li>choice</li>
<li>This is the wider choice</li>
<li>other choice</li>
</ul>
Est-il possible de le faire sans utiliser Javascript, seulement CSS? J'ai essayé avec flexbox
sans succès.
Il est possible d'utiliser de simples CSS:
.list-container {
display: inline-flex;
flex-direction: row;
justify-content: center;
}
.list {
display: flex;
flex-direction: column;
}
.list-item {
text-transform: capitalize;
background-color: rgb(200, 30, 40);
font-size: 1.3em;
text-align: left;
padding: 10px;
margin: 1px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
<!DOCTYPE html>
<div class="list-container">
<div class="list">
<div class="list-item">fresh figs</div>
<div class="list-item">pine nuts</div>
<div class="list-item">honey</div>
<div class="list-item">balsamic vinegar</div>
</div>
</div>
<div class="list-container">
<div class="list">
<div class="list-item">fresh figs</div>
<div class="list-item">pine nuts</div>
<div class="list-item">honey</div>
<div class="list-item">balsamic vinegar</div>
</div>
</div>
Avec CSS seul, il n’est pas encore possible de faire correspondre toutes les largeurs d’éléments frères à l’élément le plus large. Cependant, vous pouvez obtenir la majeure partie de la mise en page souhaitée avec CSS en donnant à vos éléments de liste une largeur de 50% pour créer la structure à deux colonnes (width: calc(50% - 10px /* subtracts margins */);
), puis en leur attribuant une largeur minimale (min-width:153px;
dans cet exemple).
Si vous ne pouvez pas définir manuellement une largeur minimale dans le fichier CSS, vous devrez probablement compléter votre code CSS avec du javascript afin de définir la largeur minimale pour les éléments frères similaires à votre exemple.
ul{
margin: 0;
padding: 5px;
list-style: none;
width:50%;
background-color: #eee;
}
ul::after {
clear: both;
content: "";
display: block;
}
li {
background: red none repeat scroll 0 0;
display: block;
float: left;
margin: 5px;
min-width: 153px;
width: calc(50% - 10px);
}
<ul>
<li>first choice</li>
<li>choice</li>
<li>This is the wider choice</li>
<li>other choice</li>
</ul>
J'ai une solution laide
https://jsfiddle.net/y5x3znqo/2/
body {
background: #ccc
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
background: red;
float: left;
margin: 5px;
}
.label {
position: absolute;
}
.hide {
visibility: hidden;
}
<ul>
<li>
<span class="label">first choice</span>
<span class="hide">This is the wider choice</span>
</li>
<li>
<span class="label">choice</span>
<span class="hide">This is the wider choice</span>
</li>
<li>
<span>This is the wider choice</span>
</li>
<li>
<span class="label">other choice</span>
<span class="hide">This is the wider choice</span>
</li>
</ul>
L'idée est de mettre l'élément le plus large dans chaque choix avec visibilité: caché. Cela nécessite de précalculer l'élément le plus large, par exemple dans le backend.