Vertikal-stack divs in verschiedenen Spalten css nur

Habe ich divs mit gleicher Breite aber verschiedenen Höhen, sollten Sie Sie in Spalten angezeigt, floating bis zur nächsten div über Ihnen.

Fiddle: http://jsfiddle.net/kaljak/DAYSk/

Is there any way to handle that without placing them via Javascript?

Eine Idee von mir wäre es, die divs für die Spalten und legen die divs in Sie, aber gibt es eine andere Möglichkeit ohne das hinzufügen von mehr markup?

Vielen Dank im Voraus!

Ich weiß nicht, ob Sie tun können, dass mit css nur. Aber man kann erreichen, dass per js (ich weiß, Sie wollen nicht, es zu benutzen): masonry.desandro.com
brauchen Sie ein wrapper-div für jede Spalte, die enthält dann die untergeordneten div ' s mit variabler Höhe.
OP dachte, dass die Lösung bereits; er will nicht extra markup.
danke Jungs, das war auch die 2 Dinge, die ich dachte, überprüfen Sie heraus die Antwort mit der css-Spalten, die ich nicht über Sie wissen, bevor 🙂

InformationsquelleAutor kaljak | 2013-07-13

css

4

Eine weitere mögliche Lösung ist die Verwendung von CSS-Spalten. Wenden Sie die Spalten-Eigenschaft des container -
```
body {
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    column-width: 100px;
}
```
Dann verwenden display: inline-block; auf die divs.

Beispiel: http://jsfiddle.net/tdwZe/

Siehe auch https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

Hinweis: CSS-Spalten werden nicht unterstützt in IE älter als IE10 (http://caniuse.com/#feat=multicolumn).
- Sehr interessante Antwort, es ist Arbeit, kein Umgang mit älter, dann IE10 ist ein großer Nachteil.. Danke trotzdem 🙂
InformationsquelleAutor Daniel Johansson

Können Sie, aber würden Sie brauchen, um die Boxen in übergeordneten Feldern

demo http://jsbin.com/ozazat/3/edit

Zum Beispiel 3 Spalten, die jeweils so viele Felder wie Sie wollen:

div div {
  background-color:red;
  margin:10px;
}
.col1, .col2, .col3 {
  width:100px;
  float:left;
  border:solid;
}

HTML

<div class="col1">
    <div>text</div>
    <div>text</div>
    <div>text</div>
  </div>  
  <div class="col2">

        <div>text<br>text</div>
    <div>text</div>

  </div>  
  <div class="col3">
        <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>

  </div>

InformationsquelleAutor user1721135

1

Ja. Sie können absolute Positionen. Vorausgesetzt, Sie kennen die Höhen deines divs. Diese Lösung funktioniert nicht für die dynamischen Inhalte.

Müssen Sie zum zuordnen einer Klasse zu jeder div, die dann die entsprechenden CSS positionieren Sie es richtig.
```
div1 {
  height: 100;
  position: absolute;
  left: 0; 
  top: 0;
}

div2 {
  height: 100;
  position: absolute;
  left: 0; 
  top: 100px; /* The height of the div above it */
}
```
Etc...

Wenn Sie dynamische Inhalte, kann es besser sein, JavaScript zu verwenden, insbesondere die jQuery Masonry Plugin.

Einen anderen Weg, dies zu tun ist, wie du Sie erwähnt hast, legen deine divs in Spalten.

Sehen diese Frage für mehr details.
- Auch die divs variable Höhe (Inhalt variiert), so ist das nicht möglich, richtig? (Sie müssten js?)
- Ich aktualisiert meine Antwort. Siehe diese Frage: stackoverflow.com/questions/16907949/...
- Danke für den Hinweis mir dem plugin!
InformationsquelleAutor Mohamad
0

Verwenden Sie float:left für jedes div dann für jede ungerade div clear:left. Das wird funktionieren, cross-browser-mit Ausnahme der Verwendung von ungeraden Kind. Sie würden haben, um zusätzliche markup und göttlichen ein, ich würde für, die. Es gibt keinen Weg darum herum, dass man leider

InformationsquelleAutor Andrew Junior Howard

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.