Montag, Januar 27, 2020

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

3 Kommentare

  1. 7

    Ist es möglich, mit einfachen css:

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

    HTML:

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

    • Dies bedeutet nicht, lösen Sie dieses layout i.stack.imgur.com/dgILr.png
    • Es funktioniert, du brauchst einfach eine zusätzliche Spalte wie diese. (Blick auf die editierte version) Jede Liste nimmt die Breite des größten Elements
    • Jeder Weg, um diese Dynamik in Bezug auf die Anzahl der Spalten? Die bereitgestellte Lösung ist nicht übermäßig sinnvoll, in irgendeiner Art und dynamischen Umfeld. Ich hatte gehofft, ich könnte einfach alles in eine Liste und legen Sie eine maximale Höhe auf der Liste zu haben, es wickeln, um mehrere Spalten, die dann aber die Größen müsste alles automatisch anpassen, so dass Sie einheitlich sind.
    • Ich denke, was Carlos versucht zu zeigen, in diesem screenshot ist, dass das original-layout zeigt die 4 Elemente in 2 Spalten, aber wenn eines der Elemente zu groß sind, dann werden alle Elemente ändern der Größe und Darstellung als Spalte 1.
  2. 3

    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:

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

    HTML:

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

    • Danke für die Antwort. Ist ähnlich wie der Wunsch, das layout aber nicht genau. Die Anzahl der Spalten sollte dynamisch sein.
  3. 1

    Habe ich eine hässliche Lösung

    https://jsfiddle.net/y5x3znqo/2/

    CSS:

    body {
      background: #ccc
    }
    
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    li {
      background: red;
      float: left;
      margin: 5px;
    }
    
    .label {
      position: absolute;
    }
    
    .hide {
      visibility: hidden;
    }

    HTML:

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

    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.

    • Markieren Sie es als Antwort, wenn Sie finden Sie Ihre Lösung auf diesem Wege. Dies würde auch anderen helfen.

Kostenlose Online-Tests