Почему блоки наползают друг на друга?

Question

[ligisayan]

Нужно сделать так, чтобы в зависимости от разрешения экрана, блоки (могут быть разной высоты в зависимости от содержимого) выстраивались все время в аккуратные ряды друг за другом, и не наползали друг на друга как сейчас. Убрать float не помогает.
фидл

Answer 1

[Михаил Чирский]

Поправил пример tef: jsfiddle.net/shrprug4/2

Comments

[ligisayan]

Михаил Чирский у вас круто получается, но не пойму, почему в фидле vertical-aling:top работает, а у меня на сайте нет.. - он же вроде как на ячейках таблицы должен только работать?

[ligisayan]

а, нет все класс! просто страница подвисла и тупила ))

Answer 2

[Денис Букреев]

w3bits.com/css-masonry
вот так?

Comments

[ligisayan]

спасибо, но нет - мне нужно, чтобы блоки ровно друг за другом шли, а не выстраивались в сетке согласно размеру

Answer 3

[tef]

Как-то так?

jsfiddle.net/v3ytu53L/1

Comments

[ligisayan]

tef не совсем - их можно как-то выровнять по сетке, чтобы блоки в строке начинались на одной линии?

Answer 4

[Oaks]

Именно для Вашего примера вот так:

.member:nth-of-type(3n+1) {
    clear: both;
}

Html

<div class="member">
  <img src="http://placehold.it/150x188">
  <h4 class="title">Заголовок</h4>
  <div class="description">
    <p>Описание</p>
  </div>
  <div class="meta">
    <span class="phone">телефон</span>
    <span class="fax">факс</span>
    <span class="linck"><a href="mailto:email">email</a>	</span>
  </div>
</div>

Адаптация:

@media only screen and (min-width: 80em) {
  .member:nth-of-type(4n+1) {
    clear: both;
  }
  .member:nth-of-type(1n) {
    clear: none;
  }
}
@media only screen and (min-width: 64em) {
  .member:nth-of-type(4n+1) {
    clear: both;
  }
  .member:nth-of-type(1n) {
    clear: none;
  }
}
@media only screen and (min-width: 40em) {
  .member:nth-of-type(3n+1) {
    clear: both;
  }
  .member:nth-of-type(1n) {
    clear: none;
  }
}
@media only screen {
  .member:nth-of-type(1n+1) {
    clear: both;
  }
  .member:nth-of-type(1n) {
    clear: none;
  }
}

Comments

[ligisayan]

Oaks так? нет, совсем не то -
по-моему, вы какой-то костыль предлагаете...

[Oaks]

ligisayan: ничего не костыль. tef Вам написал как выравнять блоки, а я написал как сделать адаптивно эти блоки.

Answer 5

[Александр Пупкин]

Ну сделайте блоки 1 высоты для всех. И задать ширину в %. Если примерно одинаково везде будет контент. Ну а потом через @media-query.

Comments

[ligisayan]

Александр Пупкин в смысле одной высоты? я же говорю, что текстовое наполнение может быть разного размера и соответственно блоки могут быть разной высоты - как я им одну задам?

[Александр Пупкин]

Дядь, сделай на Masonry. allshopz.ru

[ligisayan]

Александр Пупкин не пойдет, я ведь не из головы задания беру, а есть конкретное тз с макетом по которому делаю. к слову, Михаил Чирский уже дал правильный ответ

Answer 6

[Андрей Харьковский]

<blockquote><ol>
<b><i></i></b>	<li> </li>
</ol></blockquote>