Inline-Block mit Wrap

J

jemand anders

Erfahrenes Mitglied
Hallo,

hat jemand eine Idee, wie die Container (s. Anlage) umgebrochen werden können? Momentan erscheinen sie in einer neuen Zeile, wenn kein Platz mehr hinter den Vorgänger ist. Im Beispiel sollen also von dem roten Container noch so viele Elemente wie möglich hinter dem grünen Container erscheinen.

Freundl. Grüße
 

Anhänge

  • Screenshot_20231018_202341.jpg
    Screenshot_20231018_202341.jpg
    51,1 KB · Aufrufe: 10
Irgend wie verstehe ich deine Frage nicht ganz: "Momentan erscheinen sie in einer neuen Zeile, wenn kein Platz mehr hinter den Vorgänger ist." Anders herum bedeutet das, dass sie in der ersten Zeile angezeigt werden, wenn Platz vorhanden ist, d. h. genau das, was Du dir wünschst?
Poste am besten dein HTML und CSS.
 
Momentan erscheint der rote Container mit allen Elementen in der zweiten Zeile, obwohl zumindest noch ein Element dieses Containers am Ende der ersten Zeile Platz hätte. Um diesen Umbruch geht es mir.

Wobei, ich vermute, dass es mit CSS so gar nicht geht, was kein Beinbruch wäre. Die App ist eh nur intern für Datenbereinigungen gedacht.

Mein HTML und CSS müsste ich erst einmal von privaten Daten befreien…
 
Jetzt verstehe ich, die einzelnen Elemente liegen in verschiedenen Containern, rot und grün. In dem Fall kenne ich leider keine Lösung nur mit CSS. Keine Möglichkeit, die Elemente in einen einzigen Container zu legen?
 
Jan-Frederik Stieler hat gesagt.:
Wie wäre es mit Flexbox?
Zum Vergrößern anklicken....
Dann zeig mal, was du drauf hast. Musst nur noch umbrechen… :)
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

    <style>

    * { box-sizing: border-box; }
    body { padding: 15px; }
    .c1 { background:#ddd; display:flex; }
    .c1 > div { border:1px solid #ccc; padding:15px; display:flex; }
    img {border:1px solid #fff; }
    .c11 {  }
    .c12 {  }
    .c13 {  }

    </style>
  
</head>

<body>

    <div class="c1">

        <div class="c11">
            <div>
                <img src="https://via.placeholder.com/150/56a8c2">
            </div>
        </div>
        <div class="c12">
            <div>
                <img src="https://via.placeholder.com/150/771796">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/771796">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/771796">
            </div>
        </div>
        <div class="c13">
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
            <div>
                <img src="https://via.placeholder.com/150/f66b97">
            </div>
        </div>
    </div>

</body>
</html>

So sieht das bei mir aus:
 

Anhänge

  • Screenshot_20231105_084502.jpg
    Screenshot_20231105_084502.jpg
    27,8 KB · Aufrufe: 6
Doch, die Divs sind notwendig. Da steckt real noch mehr drin, nicht nur die Bilder wie im Beispiel.
Anderer Versuch: https://codepen.io/TomAtenmark/pen/rNPWojX
Darin sind die Blöcke richtig umgebrochen, aber die Container c11, c12, c13 sind nicht vollflächig gefüllt, und das Padding wird nicht beachtet.
 
Zuletzt bearbeitet:
Allerdings, so wird richtig umgebrochen. Wie meinst Du
die Container c11, c12, c13 sind nicht vollflächig gefüllt.
Zum Vergrößern anklicken....
? Dass horizontal Zwischenräume zwischen diesen Containern sind? Oder dass die Container in der Höhe viel kleiner als die Bilder sind?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück