Alle Artikel haben die gleiche Breite wie das breiteste element

Möchte ich zum erstellen dieser layout:

Alle Artikel haben die gleiche Breite wie das breiteste element

Wenn ein Element nicht in den Behälter passen, können wir bewegen auf die nächste Zeile:

Alle Artikel haben die gleiche Breite wie das breiteste element

Wenn der container die kleinen als die größeren posten, wir können wickeln Sie den Inhalt in mehrzeilige

Alle Artikel haben die gleiche Breite wie das breiteste element

Es ist sehr einfach mit Javascript, hier ist das Beispiel https://jsfiddle.net/oucxsep4/.

JS:

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";
};

CSS:

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
li{
    background: red;
    float: left;
    margin: 5px;
}

HTML:

<ul>
    <li>first choice</li>
    <li>choice</li>
    <li>This is the wider choice</li>
    <li>other choice</li>
</ul>

Ist es möglich zu tun, ohne Javascript, nur CSS? Ich habe versucht mit flexbox ohne Erfolg.

  • Flexbox hat kein raster Begriff. Elemente in verschiedenen flex-Linien Verhalten sich unabhängig voneinander, also ich glaube nicht, können Sie erreichen dies mit flexbox.
  • Ist dies eine doppelte Beantwortung Ihrer Frage ? stackoverflow.com/questions/42656183/...
InformationsquelleAutor Carlos | 2015-07-01
Schreibe einen Kommentar