Vertikal stap divs in verschiedenen Spalten css nur

Ich habe divs mit gleicher Breite aber unterschiedlicher Höhe, sie sollten in Spalten angezeigt werden, bis zum nächsten Div über ihnen schwebend.Vertikal stap divs in verschiedenen Spalten css nur

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

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

Eine Idee von mir wäre divs für die Spalten haben und die divs in sie zu setzen, aber gibt es eine andere Möglichkeit, ohne weitere Markup hinzufügen?

Vielen Dank im Voraus!

Quelle

2013-07-13 kaljak

Ich weiß nicht, ob Sie das nur mit CSS tun können. Aber Sie können das über js erreichen (ich weiß, dass Sie es nicht verwenden wollen): http://maurryon.desandro.com/ –

@kaljak: Sie müssen ein Wrapper-div für jede Spalte hinzufügen, die dann die untergeordneten divs enthält von variabler Höhe. –

@MohitPandey OP dachte schon an diese Lösung; Er möchte kein zusätzliches Markup. – Mohamad

Eine andere mögliche Lösung ist die Verwendung von CSS-Spalten. Tragen Sie die Spalten-Eigenschaft auf den Behälter

body { 
    -moz-column-width: 100px; 
    -webkit-column-width: 100px; 
    column-width: 100px; 
}

Dann display: inline-block; auf den div s verwenden.

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 in IE unterstützt älter als IE10 (http://caniuse.com/#feat=multicolumn).

Quelle

2013-07-13 17:02:11

Sehr interessante Antwort, es funktioniert, nicht mit älteren dann IE10 ist ein großer Nachteil .. Danke trotzdem :) – kaljak

Ja. Sie können absolute Positionen verwenden. Angenommen, Sie kennen die Höhen Ihrer Divs. Diese Lösung eignet sich nicht für dynamische Inhalte.

Sie müssen jedem Div eine Klasse zuweisen und dann das entsprechende CSS angeben, um es korrekt zu positionieren.

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 dynamischen Inhalt zu tun haben, kann es besser sein, JavaScript zu verwenden, die jQuery Masonry Plugin im Besonderen.

Eine andere Möglichkeit, wie Sie bereits erwähnt haben, besteht darin, Ihre Divs in Spalten zu stapeln.

Weitere Informationen finden Sie unter this question.

Quelle

2013-07-13 16:30:34 Mohamad

Nun die divs haben variable Höhe (Inhalt variiert), so dass das nicht ist möglich, oder? (Sie würden js brauchen?) – kaljak

Ich aktualisierte meine Antwort. Siehe diese Frage: http://stackoverflow.com/questions/16907949/floating-div-extra-space-fillup/16907969#16907969 – Mohamad

Danke für das Zeigen auf das Plugin! – kaljak

können Sie, aber Sie würden die Kisten in Eltern-Boxen

Demohttp://jsbin.com/ozazat/3/edit

Zum Beispiel 3 Spalten platzieren müssen, von denen jeder so viele Felder halten, 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>

Quelle

2013-07-13 16:36:58 user1721135

Verwenden Sie float: links für jedes div dann für jedes ungerade div verwenden clear: left. Dies funktioniert Cross-Browser mit Ausnahme von Odd-Child. Du würdest extra Markup hinzufügen müssen und mir ein Göttliches geben. Es gibt leider keine Möglichkeit, dass man

Quelle

2013-07-13 18:25:26

Vertikal stap divs in verschiedenen Spalten css nur

Antwort

Verwandte Themen