|
|
| Line 1: |
Line 1: |
| <html>
| |
| <style>
| |
| Красивое выравнивание блоков по резиновой сетке
| |
| Максим Усачев 26.04.2012 62 Comments
| |
| CSS, СтатьиCSS
| |
| Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.
| |
|
| |
| При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?
| |
|
| |
| Проблема возникает в последней строке, на которой горизонтальный ритм сетки сбивается. Но оказалось, что эту проблему можно решить!
| |
|
| |
|
| |
| Проблема
| |
| Для начала предлагаю обсудить этот вопрос подробнее. Посмотреть примеры того, что именно за неприятность происходит с последней строкой в сетке, а так же определиться, какого результата мы ждём.
| |
|
| |
| Проблема очень похожа в обоих случаях, так что выберем любое свойство из двух, например, text-align: center. А так же воспользуемся маркированным списком.
| |
|
| |
| <ul>
| |
| <li>Пункт 1</li>
| |
| <li>Пункт 2</li>
| |
| <li>Пункт 3</li>
| |
| <li>Пункт 4</li>
| |
| <li>Пункт 5</li>
| |
| <li>Пункт 6</li>
| |
| <li>Пункт 7</li>
| |
| <li>Пункт 8</li>
| |
| </ul>
| |
| ul {
| |
|
| |
| text-align: center;
| |
| }
| |
|
| |
| ul li {
| |
| display : inline-block;
| |
| width : 80px;
| |
| height: 80px;
| |
| margin-bottom: 10px;
| |
| background: #E76D13;
| |
| vertical-align: top;
| |
| text-align: center;
| |
| line-height: normal;
| |
| }
| |
| </style>
| |
|
| |
| <ul>
| |
| <li>Knowledge base</li>
| |
| <li>Tutorials </li>
| |
| <li>Functionality Updates</li>
| |
| <li>Cases</li>
| |
| </ul>
| |
|
| |
| </html>
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| __NOTOC__ {{DISPLAYTITLE:MDriven Wiki}} | | __NOTOC__ {{DISPLAYTITLE:MDriven Wiki}} |
