Нужно сделать так, чтобы в зависимости от разрешения экрана, блоки (могут быть разной высоты в зависимости от содержимого) выстраивались все время в аккуратные ряды друг за другом, и не наползали друг на друга как сейчас. Убрать float
не помогает.
.member {
display:inline-block;
width:160px;
font-size:14px;
float: left;
}
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание</p>
<p>телефон</p>
<p>факс</p>
<a href="mailto:email">email</a>
</div>
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание бла-бла-бла бла-бла-бла</p>
<p>телефон</p>
<p>факс</p>
<a href="mailto:email">email</a>
</div>
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание</p>
<p>телефон</p>
<p>факс</p>
<a href="mailto:email">email</a>
</div>
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание бла-бла-бла</p>
<p>телефон</p>
<p>факс</p>
<a href="mailto:email">email</a>
</div>
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание бла-бла-бла-бла-бла-бла</p>
<p>телефон</p>
<a href="mailto:email">email</a>
</div>
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание</p>
<p>телефон</p>
<p>факс</p>
<a href="mailto:email">email</a>
</div>
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание</p>
<p>телефон</p>
<a href="mailto:email">email</a>
</div>
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание</p>
<p>телефон</p>
<p>факс</p>
<a href="mailto:email">email</a>
</div>
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание</p>
<p>телефон</p>
<p>факс</p>
<a href="mailto:email">email</a>
</div>
<div class="member">
<img src="http://placehold.it/150x188">
<h4>Заголовок</h4>
<p>Описание</p>
<p>телефон</p>
<a href="mailto:email">email</a>
</div>