Здравствуйте! Помогите новичку решить такую проблему:
Делаю меню подразделов сайта на чистом html 5/css 3 без фреймворков. В блоке nav - 4 блока section со своим содержимым.
При уменьшении экрана блоки section смещаются вниз по-одному. То есть при ширине экрана, когда 4 блока в ряд не помещаются, вниз сдвигается последний (т.е. четвертый).
А мне нужно, чтобы смещались сразу 2 блока. А то совсем криво получается, когда в первом ряду 3 блока, а во втором один.
Как мне сделать принудительный перенос именно двух блоков на этой ширине экрана?
Спасибо!
figure {
background: #5f6a72; /* Цвет фона */
padding: 10px; /* Поля вокруг */
display: inline-block; /* Строчно-блочный элемент */
width: 150px; /* Ширина */
height: 250px; /* Ширина */
float: left; /* Блоки выстраиваются по горизонтали */
margin: 10px 10px 10px 10px; /* Отступы */
text-align: center; /* Выравнивание по центру */
}
figcaption {
display: block;
color: #fff; /* Цвет текста */
}
<html><head></head>
<body>
<p>Для удобства выбора квартиры на нашем сайте сгруппированы по районам и станциям метро, по количеству комнат. Вы можете отдельно просматривать последние обновления. В отдельный раздел вынесены посуточные квартиры</p>
<nav>
<section class="choice">
<figure>
<h1><a href=''>Последнее обновление<a></h1>
<p><img src='pic1.jpg'alt='Все квартиры за сегодня'></p>
<figcaption>Адреса и описания / Все варианты за сегодня</figcaption>
</figure>
</section>
<section class="choice">
<figure>
<h1><a href=''>По районам СПб</a></h1>
<p><img src='pic1.jpg'alt='Квартиры по районам и метро'></p>
<br />
<figcaption>Длительная аренда по районам <br />и станциям метро</figcaption>
</figure>
</section>
<section class="choice">
<figure>
<h1><a href=''>Однокомнатные, двухкомнатные,<br /> 3ккв и более</a></h1>
<p><img src='pic2.jpg' alt='1ккв, 2ккв, 2ккв'></p>
<figcaption>База квартир <br />по количеству <br />комнат</figcaption>
</figure>
</section>
<section class="choice">
<figure>
<h1><a href=''>Посуточные квартиры</a></h1>
<p><img src='pic2.jpg' alt='Аренда на несколько дней'></p>
<figcaption><br />Квартиры в аренду на короткие сроки</figcaption>
</figure>
</section>
</nav>
</body>
<html>