Why do blocks overlap each other?

Question

css

It is necessary to make it so that, depending on the screen resolution, the blocks (can be of different heights depending on the content) line up all the time in neat rows one after another, and do not crawl on top of each other as they are now. Removing the float does not help.
fiddle

Answer 1

Fixed tef example : jsfiddle.net/shrprug4/2

Answer 2

w3bits.com/css-masonry
like this?

Answer 3

Something like this?
jsfiddle.net/v3ytu53L/1

Answer 4

For your example, like this:

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

<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;
  }
}

Answer 5

Well make blocks 1 height for everyone. And set the width in%. If the content is about the same everywhere. Well, then through @media-query.

Answer 6

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