• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Elemente vertikal anordnen

B

bermany

New member
Hallo Foren-Gemeinde.

Ich würde gerne eine Reihe von div-elementen deren display auf "inline-block" eingestellt ist vertikal anordnen.
Regulär werden die Elemente horizontal angeordnet, bis die max. Breite erreicht ist, dann beginnt die 2. Zeile.

Ich möchte hingegen die 1. Spalte füllen und wenn diese keinen Platz mehr aufweist mit der 2. beginnen usw.

Gibt es dafür eine CSS-Einstellung?

Danke.
 
Zuletzt bearbeitet von einem Moderator:
Es gibt ja deises multi coumn zeugs, aber in wieweit das browserügergreifend kompatibel ist habe ich noch keine Erfahrungswerte...
HTML: 
<!Doctype>
<html>
<head>
    <title>Multi-columns</title>
    <style>
    div#list_1 {
        height: 200px;
        padding-top: 6px;
        border: 2px solid blue;
        -webkit-column-width: 150px; /* Chrome, Safari, Opera */
        -moz-column-width: 150px; /* Firefox */
        column-width: 150px;
        -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
        -moz-column-gap: 20px; /* Firefox */
        column-gap: 20px;
    }

    div#list_1 div {
        display: block;
        margin: 0 6px 6px 6px;
        padding: 4px;
        border: 1px solid gray;
    }
    </style>
    <script>
    function fillList() {
        var i,
            nodeLi,
            node = document.getElementById('list_1');

        for (i = 1; i < 51; i = i + 1) {
            nodeLi = document.createElement('div');
            nodeLi.appendChild(document.createTextNode('ELEMENT ' + i));
            node.appendChild(nodeLi);
        }
    }

    window.onload = fillList;
    </script>
</head>

<body>
    <div id="list_1"></div>
</body>
</html>
 
Sorry, dass ich erst jetzt antworte, hatte viel um die Ohren.

Das ist genau das, was ich gesucht habe. Besten Dank dafür.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben