0

Нужно сделать так, чтобы в зависимости от разрешения экрана, блоки (могут быть разной высоты в зависимости от содержимого) выстраивались все время в аккуратные ряды друг за другом, и не наползали друг на друга как сейчас. Убрать 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>

2 ответа 2

0

Ширина member должна быть ровна ширине изображений.И исходя из того,сколько блоков у вас должно быть в 1 ряду-прописывайте ширину родительскому блоку. Например.Вы хотите, что бы блоки member были по 5 штук в ряд.Значит ширину каждого ставите 200 пикселей.И ширину родительского элемента ставите 1000 пикселей+ему же(родительскому элементу) пропишите margin:0 auto

1
  • нет-нет, сайт должен под разные разрешения адаптироваться - я об этом писал в описании, поэтому никаких заданий ширины родительскому элементу. и с чего вы взяли, что ширина member должна быть ровна ширине изображений - совсем не обязательно. посмотрите правильный ответ выше - там все верно
    – Вася
    Commented 24 нояб. 2015 в 8:06
0

Решение - здесь

.member {
  display: inline-block;
  width: 160px;
  font-size: 14px;
  vertical-align: top;
}
<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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.