Alle Artikel haben die gleiche Breite wie das breiteste element
Möchte ich zum erstellen dieser layout:
Wenn ein Element nicht in den Behälter passen, können wir bewegen auf die nächste Zeile:
Wenn der container die kleinen als die größeren posten, wir können wickeln Sie den Inhalt in mehrzeilige
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/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ist es möglich, mit einfachen css:
CSS:
HTML:
Ist es noch nicht möglich mit CSS allein zu match alle gleichgeordneten Elemente Breite an der breitesten ein. Sie können jedoch erreichen die meisten der von Ihnen gewünschten layout mit CSS, indem Sie Ihre Liste der Elemente, die eine Breite von 50% zu erstellen, die zwei Spalten-Struktur (
width: calc(50% - 10px /* subtracts margins */);
) und dann geben Sie auch hier eine minimale Breite (min-width:153px;
in diesem Beispiel).Wenn Sie nicht in der Lage, manuell eine minimale Breite in der CSS dann werden Sie wahrscheinlich haben, um ergänzen Sie Ihre CSS-Datei mit etwas javascript, um die minimale Breite für diejenigen, die gleichgeordneten Elemente ähnlich wie dein Beispiel.
CSS:
HTML:
Habe ich eine hässliche Lösung
https://jsfiddle.net/y5x3znqo/2/
CSS:
HTML:
Die Idee ist, setzen Sie das breiteste Element in jeder Entscheidung, die mit visibility:hidden. Dies erfordert vorberechnen das breiteste Element, zum Beispiel im backend.