Elemente vertikal ohne Abstand anordnen

Wie kann ich Elemente mit unterschiedlichen Höhen vertikal anordnen? Ich meine, mit so etwas wie folgt aus:Elemente vertikal ohne Abstand anordnen

div[class^="elm"]{ 
 
\t width: 50%; 
 
\t display: inline-block; 
 
\t margin-bottom: 20px; 
 
\t background-color: gray; 
 
} 
 
\t 
 
.elm1{ 
 
\t height: 100px; 
 
} 
 
\t 
 
.elm2{ 
 
\t height: 200px; 
 
} 
 
\t 
 
.elm3{ 
 
\t height: 160px; 
 
} 
 
\t 
 
.elm4{ 
 
\t height: 110px; 
 
} 
 
\t 
 
.elm5{ 
 
\t height: 60px; 
 
} 
 
\t 
 
.elm6{ 
 
\t height: 220px; 
 
} 
 
\t 
 
.elm7{ 
 
\t height: 90px; 
 
}

<div class="elm1">Element 1</div><div class="elm2">Element 2</div><div class="elm3">Element 3</div><div class="elm4">Element 4</div><div class="elm5">Element 5</div><div class="elm6">Element 6</div><div class="elm7">Element 7</div>

und es so zeigt (Ordnung ist wichtig):

Ich weiß, dass diese Art der Sache kann geschehen mit zwei Blöcken. jeder für eine Spalte, aber es macht mich zu Javascript in Responsive Design verwenden (für die Herstellung von mehr als zwei Spalten).

Beispiel Google+ tut es mit Multi-Block, der durch Javascript ändert. Wie kann ich es tun, ohne Javascript und nur CSS zu verwenden?

Quelle

2017-03-07 ICE

Sie möchten vielleicht 'Flexbox auszuchecken ' – domsson

@domdom Ich habe so etwas schon einmal versucht: http://codepen.io/klamping/pen/bddxyr?editors=110 aber es tut nicht, was ich brauche :( – ICE

Ist das nicht ein Mauerwerk Layout? Haben Sie in Betracht gezogen, das Maurerplugin zu verwenden, das dir erlaubt, Elemente zu bestellen –

Ist das Ausgangs Sie

erwarten sind

das Sie

Check output in Codepen.io

div[class^="elm"] { 
 
    width: 50%; 
 
    display: block; 
 
    background-color: gray; 
 
} 
 

 
.elm1 { 
 
    height: 100px; 
 
    margin: 2px; 
 
} 
 

 
.elm2 { 
 
    height: 200px; 
 
    position: relative; 
 
    left: 10px; 
 
    top: -105px; 
 
    float: right; 
 
} 
 

 
.elm3 { 
 
    height: 160px; 
 
    margin: 2px; 
 
} 
 

 
.elm4 { 
 
    height: 110px; 
 
    margin: 2px; 
 
    position: relative; 
 
    left: 10px; 
 
    top: -105px; 
 
    float: right; 
 
} 
 

 
.elm5 { 
 
    height: 60px; 
 
} 
 

 
.elm6 { 
 
    height: 220px; 
 
    margin: 2px; 
 
    position: relative; 
 
    left: 10px; 
 
    top: -105px; 
 
    float: right; 
 
} 
 

 
.elm7 { 
 
    height: 90px; 
 
    margin: 2px; 
 
}

<div class="elm1">Element 1</div> 
 
<div class="elm2">Element 2</div> 
 
<div class="elm3">Element 3</div> 
 
<div class="elm4">Element 4</div> 
 
<div class="elm5">Element 5</div> 
 
<div class="elm6">Element 6</div> 
 
<div class="elm7">Element 7</div>

Quelle

2017-03-07 12:57:42

Danke für deine Antwort aber, was du ich bin Es ist gut, wenn ich weiß, wie viele Elemente ich habe und welche nach rechts und welche nach links geht. Die ganze Idee dreht sich alles um Liste. Es kann sogar 1000 von ihnen oder mehr sein und es muss eine gute Lösung sein, wenn man von zwei Spalten auf drei oder mehr Spalten im Responsive Design wechselt. – ICE

Löst meine Lösung Ihr Problem? –

Sie können dies tun, indem zwischen float: left und float: right helfen könnten:

.items { 
 
    display: block; 
 
    overflow: hidden; 
 
    width: 400px; 
 
} 
 

 
.item { 
 
    box-sizing: border-box; 
 
    width: 190px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    background: #000; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-family: 'Arial', 'Helvetica', sans-serif; 
 
    font-size: 48pt; 
 
    font-weight: bold; 
 
} 
 

 
.item:nth-child(odd) { 
 
    float: left; 
 
} 
 

 
.item:nth-child(even) { 
 
    float: right; 
 
} 
 

 
.elm1 { 
 
    height: 100px; 
 
} 
 
\t 
 
.elm2 { 
 
    height: 200px; 
 
} 
 
\t 
 
.elm3 { 
 
    height: 160px; 
 
} 
 
\t 
 
.elm4 { 
 
    height: 110px; 
 
} 
 
\t 
 
.elm5 { 
 
    height: 60px; 
 
} 
 
\t 
 
.elm6 { 
 
    height: 220px; 
 
} 
 
\t 
 
.elm7 { 
 
    height: 90px; 
 
}

<div class="items"> 
 
    <div class="item elm1">1</div> 
 
    <div class="item elm2">2</div> 
 
    <div class="item elm3">3</div> 
 
    <div class="item elm4">4</div> 
 
    <div class="item elm5">5</div> 
 
    <div class="item elm6">6</div> 
 
    <div class="item elm7">7</div> 
 
</div>

Hoffnung, das hilft.

EDIT: Dies kann immer noch nicht, in Abhängigkeit von den Höhen der Fliesen, wie hier zu sehen ist: https://jsfiddle.net/f16apso8/ - besser (ist) Lösungen vorhanden sind hier: How to Create Grid/Tile View with CSS?

Quelle

2017-03-07 13:14:09 domsson

Danke für die Erwähnung Nth-Kind. jetzt kann ich nth-child (3n + 0) für drei Spalten und nth-child (4n + 0) für vier Spalten verwenden. Wenn Sie möchten, fügen Sie das zu Ihrer Antwort hinzu. – ICE

Großartig! Beachten Sie jedoch, dass Sie möglicherweise immer noch "Lücken ausrichten", wenn Sie eine bestimmte Reihenfolge und Größe der Elemente haben (versuchen Sie die genaue Größe der Elemente, die in Ihrem Beispielbild gezeigt wird). Ich bin mir momentan nicht sicher, wie ich das lösen soll, um ehrlich zu sein. – domsson

So viel wie ich das Lob nehmen möchte, ist dies das verbleibende Thema, über das ich sprach: https://jsfiddle.net/f16apso8/ - Ich denke @ TomMichew hatte Recht, als er das Mauerwerk Layout vorgeschlagen, überprüfen Sie http: //Paketüberfluss.com/questions/8470070/how-to-create-grid-kachel-view-with-css (JavaScript) und eine reine CSS3-Lösung hier http://stackoverflow.com/questions/8470070/how-to-create-grid- Kachel-Ansicht-mit-CSS # answer-42614384 – domsson

Elemente vertikal ohne Abstand anordnen

Antwort

Verwandte Themen