web-dev-qa-db-fra.com

Chaque article doit avoir la même largeur que l'élément le plus large

Je veux créer cette mise en page:

enter image description here

Lorsqu'un élément ne rentre pas dans le conteneur, nous pouvons passer à la ligne suivante:

enter image description here

Lorsque le conteneur est plus petit que l'élément plus large, nous pouvons envelopper le contenu en plusieurs lignes

enter image description here

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.

csscss3flexbox
19
Carlos

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>

6
Ericky

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>

3
IMI

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.

0
Carlos