Układ bloków o różnej wysokości - layout

Question

Hej, chcę na blogu w widoku kategorii mieć wyświetlone artykuły w dwóch kolumnach. Z racji tego, że np. niektóre mają zdjęcie, inne nie, bloki mają różną wysokość. Jak stworzyć taki układ? Chodzi o układ mniej więcej, jak tu: http://stylowi.pl/ tylko z dwoma kolumnami (to akurat ma małe znaczenie).

CSS jest w stanie tak to ułożyć, więc podejrzewam, że trzeba będzie użyć JavaScriptu:

Answer 1

Stwórz sobie kolumny z float: left i później zapełnij je blokami z odpowiednimi marginesami:

<div class="contener">
	<div style="float: left">
		<div class="article">
		</div>
	</div>
	<div style="float: left">
		<div class="article">
		</div>
	</div>
	<div style="float: left">
		<div class="article">
		</div>
	</div>
</div>

EDIT: Masz demko: http://codepen.io/anon/pen/rOyMve.

Answer 2

Przecież to żaden problem:

<div class="main">
     <div class="col">
          <div class="article">...</div>
          <div class="article">...</div>
          <div class="article">...</div>
     </div>
      <div class="col">
          <div class="article">...</div>
          <div class="article">...</div>
     </div>
</div>

i do tego prosty css:

.main {
    margin: 0 auto;
    width: 1000px;
    overflow: hidden;
}

.col {
   float: left;
   width: 500px;
}

Pisane z palca, oczywiście trzeba to dostosować do własnych potrzeb. Można to także wykonać na grid'zie, ale skoro zadajesz takie pytanie, to zakładam, że jestes początkujący i nie ma co mieszać Ci w głowie.

Pozdrawiam!

Comments

Nie podoba mi się sztywne przyporządkowanie div.item do danej kolumny. W przypadku dodania responsywności (np. przekształcenie widoku do jednej kolumny na mniejszym ekranie), kolejność bloków się sypie. Tu jest inna wersja, bez sztywnego rozdzielenia na kolumny, z wykorzystaniem właściwości 'column-count' i 'inline-block.

<div class="masonry">
   <div class="item"></div>
   <div class="item"></div>
   ...
   <div class="item">...</div>
</div>

.masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item {
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

Tu jednak kolejność bloków jest niewłaściwa:
1|5
2|6
3|7
4|8

zamiast:
1|2
3|4
5|6
7|8

Ostatecznie znalazłem rozwiązanie! :) Wystarczyło słowo 'masonry' (cegiełkowy układ). Zapraszam tu: Masonry.js.