CSS: divs Gesetzt, der horizontal in 2 Reihen

Können sagen, ich habe 

<div class="cont">
    <div class="single">1</div>
    <div class="single">2</div>
    <div class="single">3</div>
    <div class="single">4</div>
    <div class="single">5</div>
    <div class="single">6</div>
    <div class="single">7</div>   
</div>

Was ich haben will, ist die plase .einzelne divs in 2 Reihen, wie Ziegel horizontaly von Links nach rechts diese einfache Art und Weise: 1. div wird in der linken oberen Ecke, der 2. wird unterhalb 1., 3. platziert weiter zu 1., 4. platziert unten 3. und so weiter wie:

1 3 5 7 9
2 4 6 8

Alle divs hat die gleiche Größe.

Habe ich versucht mit masonry.js und seine arbeiten wie ein Charme, aber seine Art und Weise, um komplexe Lösung für eine so einfache Aufgabe (einfach Lösung wichtig ist).

fiddle Spielplatz

InformationsquelleAutor OPOPO | 2013-05-11
  1. 3

    Gibt es eine CSS-Eigenschaft, die genau das macht, dass

    http://tinker.io/8ff59

    .cont {
    -webkit-columns: 5em;
    -moz-columns: 5em;
    columns: 5em; /* desired width of column */
}

    http://caniuse.com/#feat=multicolumn

    • es funktioniert im IE 10.. Breite der div-container wie 400 px usw.
    InformationsquelleAutor cimmanon
  2. 0

    Ich glaube nicht, Sie können tun, dass mit css mit der Struktur wie Sie haben.

    Diese Struktur soll Ihnen helfen, erhalten Ihre gewünschten layout:

    <div class="a">
   <div class="b">
       <div class="c">1</div>
       <div class="c">2</div>
   </div>
   <div class="b">
       <div class="c">3</div>
       <div class="c">4</div>
   </div>
</div>


<style>
div.a div.b {float: left; width: 100px;}
</style>
    • Es wird vermutlich funktionieren, aber es ändert die Struktur des DOM und es kann schwierig werden, wenn geht über Sortieren etc. Ich dachte über einige N-te css-Elemente, aber ich bin mir nicht sicher, ob das möglich
    • Sie brauchen nur zwei Zeilen oder mehr?
    • sagen wir 2, ich bin mir nicht 100% sicher, aber wir können davon ausgehen, dass.
    InformationsquelleAutor jancha
  3. 0

    Um des Arguments Willen, lasst uns sagen, dass Sie nicht ändern können Ihr Dokument Struktur - Sie müssen dies tun, durch layout-Definitionen allein.

    Wenn Sie wissen, wie viele Elemente Sie haben, ist der einfachste Weg, dies zu bewerkstelligen, wäre CSS3 Spalten mit inline-block-Elemente. Ihre .singles sind die inline-Blöcke, und .cont setzt die 'Spalten' - Eigenschaft festlegen 5 Spalten breit genug sind, um Ihre Slips, während Sie mit Hilfe des max-Höhe zu zwingen, die inline-Blöcke auf neue Spalten alle zwei Elemente. Die Unterhemden haben eine min-Größe groß genug, um mehrere inline-Blöcke angezeigt auf der gleichen Linie.

    Sehen Sie diesen Effekt als jsfiddle hier: http://jsfiddle.net/mwjJG/25/ :

    .container {
    height: 240px;

    columns: 100px 5;
    -webkit-columns: 100px 5;
    -moz-columns: 100px 5;
    }

.single {
    display: inline-block;
    height: 100px;
    width: 100px;
    }

    Tun sich bewusst sein, das funktioniert nicht auf IE<10, es sei denn, Sie verwenden irgendeine Art von JS-basierten shiv, um Unterstützung für die columns-Eigenschaft (CSS Pie kann in der Lage sein, dies zu tun).

    InformationsquelleAutor Jimmy Breck-McKye
  4. 0

    Ich erreicht dies mit CSS hier mit diesem code: Es ist nett hackish obwohl.

    Ich drei divs (die letzten drei) der Klasse 'double'

    .cont .single {
    background: blue;
    color: white;
    width: 100px;
    height: 100px;
    margin: 10px;
    float:left;
    display: inline-block;
}
.cont .double {
    background: blue;
    color: white;
    width: 100px;
    height: 100px;
    margin: 10px;
    display:inline-block;
    float:left;
}

div:nth-child(5) {
    clear:left;
}

.cont {
    height: 220px;
    background: red;
}
    InformationsquelleAutor Senjai
Schreibe einen Kommentar