Ändern der Abstände zwischen den Zeilen im Skeleton Framework.

Question

Im Moment habe ich zwei Divs mit "einer halben Spalten" -Klasse.

Wie Sie hier sehen können, ist die untere Karte auf der linken Seite immer noch mit der unteren auf der rechten Seite ausgerichtet.

Ich möchte Pinterest Art von Stil wie dies, aber ich weiß nicht wie, weil sie in verschiedenen Reihen sind.

Hier ist mein HTML-Code.

<div class="container"> 
<div class="row"> 
    <div id="cards" class="one-half column" style="margin-top: 25%"> 
    <img class="card-image" src="img/sample.png"> 
    <div class="title"> 
    <h4>Stealth Rats</h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p> 
    </div> 
    </div> 
    <div id="cards" class="one-half column" style="margin-top: 25%"> 
    <img class="card-image" src="img/sample.png"> 
    <div class="title"> 
    <h4>Basic Page</h4> 
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p> 
    </div> 
    </div> 
</div> 

<div class="row"> 
    <div id="cards" class="one-half column" style="margin-top: 5%"> 
    <img class="card-image" src="img/sample.png"> 
    <h4>Basic Page</h4> 
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p> 
    </div> 
    <div id="cards" class="one-half column" style="margin-top: 5%"> 
    <img class="card-image" src="img/sample.png"> 
    <h4>Basic Page</h4> 
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p> 
    </div> 

Vielen Dank im Voraus!

Answer 1

Sie können es nicht in einfachem CSS tun, es sei denn, Sie arbeiten mit Spalten statt mit Zeilen (und das bricht die Wichtigkeit des Inhalts).

Was Sie wollen, ist Masonry oder eine andere Javascript-Alternative.

Auch Ihr HTML hat Fehler, Sie können nicht die gleiche ID mehr als einmal verwenden. Ändere es in class = 'cards' und wenn du Maurerarbeit verwenden willst, musst du jede Karte in ein div setzen, also in diesem Fall innerhalb derselben Zeile.

Dann können Sie nennen es

$('.row').masonry({ 
    itemSelector: '.cards', 
    columnWidth: 200 //this is an example. 
}); 

Da Mauerwerk reagiert, können Sie sich über Skelett für diesen Teil vergessen.