×

Вокруг мира турциятунисПетербург и окрестностиТайны историиОбщество, мирСтрашное и мистическоеВыборгфакты и мирПоследние новостипро сссрКрым
Интересно Мистика и Гаданияуроки по html,css,js,phpАнекдотыМузыка
Исскуство и поэзия Стихи Серебренного векаЯпонские стихи и прозаПритчиБасниМифы и Легенды древнего мираСтихи Золотого века
Разные эпохи Древняя АзияСредневековьеТайны историипро сссрСказки народов мира
Разное ОригамиРаскраскиКонвертерыСтрашное и мистическоеКомедия "Дино и его друзья"
общество и мир Афоризмы и цитатыфакты и мирПоследние новостиПсихологияОбщество, мир

-----------

Вашему сайту нужна помощь? Политика конфидициальности Разместить рекламу

Как разместить несколько блоков css? (разные варианты)


html, css, inline-block, block, div, блок, блоки, подстраиваться, выравнивание, по сетке, сетка, плитка, линию, друг под другом, разместить, поставить, размещение, в одну линию, адаптивный, дизайн, сделать, чтобы, подстраивались,

Если вы столкнулись с проблемой, когда вам нужно разместить линию блоков друг под другом или же, когда нужно создать линию из блоков и чтобы они автоматически размещались друг под другом при нехватке места на экране, то вы можете использовать для этого простое свойство css - inline-block. inline-block удобен тем, что он может подстраиваться (быть адаптивным) под маленькие экраны или же автоматически смещать блоки друг под друга.
Хочется заметить, что inline block можно использовать для создания дизайна "metro" (дизайн такого типа используется в плитке windows 8 и "угробленного" windows phone lumia)
Как разместить несколько блоков css? (разные варианты)
С картинки выше вы можете видеть, что есть несколько основных вариантов использования inline-block. Я опишу 3 варианта.
1 вариант - с сеткой из блоков, которые подстраиваются друг под друга.
2 вариант - вертикальная прямая линия из блоков
3 вариант - горизонтальная линия, которая будет заходить за границы экрана и прокручиваться.

Вариант 1.
Давайте попробуем для начала создать простой вариант с блоками, которые будут подстраиваться друг под друга при нехватке места.
Для начала поясню:
catalog - задает место, где будут располагаться блоки. Он же и задает максимальные границы (width:500), за которые блоки не могут заходить и будут автоматически подстраиваться друг под друга. Если в width:500 поменять на width:100%, то блоки будут смещаться только, когда дойдут до границ вашего экрана. Таким образом они станут адаптивными.
item - размер и свойства маленьких блоков. блок имеет размер 116 x 75 пикселей.

<h1>Каталог в три колонки</h1>
<div class="catalog">
<div class="item">Товар1</div>
<div class="item">Товар2</div>
<div class="item">Товар3</div>
<div class="item">Товар4</div>
<div class="item">Товар5</div>
<div class="item">Товар6</div>
<div class="item">Товар7</div>
<div class="item">Товар8</div>
</div>

css-код:

.catalog{
width:500px;
background:#ecf0f1;
box-shadow:0 0 3px #999;
font-size: 0px;
}
.item{
font-size: 18px;
display:inline-block;
margin-right:20px;
vertical-align:top;
width:116px;
height:75px;
margin-bottom:20px;
text-align:center;
background:#3498db;
color:white;
border:2px solid #2c3e50;
}

Как видите это достаточно просто. Вот работающий похожий пример с block-inline для наглядности.

See the Pen LYpZjrE by Lora Ug (@lora-ug)on CodePen.


Вариант 2.
Теперь попробуем сделать так, чтобы у нас получилась вертикальная прямая линия, как в варианте 2. Например, такую линию можно использовать при создании новостной ленты или боковой ленты сайта с новыми статьями. Это сделать ещё проще. Просто поменяйте значение в catalog с width:500 на width:150.
Как видите, catalog стал уже и item (блоки) подстроились под максимальный размер catalog (каталога).

.catalog{
width:150px;
background:#ecf0f1;
box-shadow:0 0 3px #999;
font-size: 0px;
}

Вариант 3.
Теперь создадим длинную линию, которая будет заходить за границы экранов смартфонов и компьютеров.
Для этого просто добавьте в catalog свойство overflow:scroll и измените width:500 на любое другое большое значение, которое больше вашего экрана. Например 1700.
scroll - добавить полосу прокрутки, если блоки будут заходить за границу.
Заодно добавим чуть больше блоков, чтобы было что прокручивать.

<div class="catalog">
<div class="item">Товар1</div>
<div class="item">Товар2</div>
<div class="item">Товар3</div>
<div class="item">Товар4</div>
<div class="item">Товар5</div>
<div class="item">Товар6</div>
<div class="item">Товар7</div>
<div class="item">Товар8</div>
<div class="item">Товар9</div>
<div class="item">Товар10</div>
<div class="item">Товар11</div>
<div class="item">Товар12</div>
<div class="item">Товар13</div>
<div class="item">Товар14</div>
<div class="item">Товар15</div>
<div class="item">Товар16</div>
</div>


.catalog{
white-space: nowrap;
overflow: scroll;
width:1700px;
background:#ecf0f1;
box-shadow:0 0 3px #999;
font-size: 0px;
}
.item{
font-size: 18px;
margin-right:20px;
vertical-align:top;
display:inline-block;
width:116px;
height:75px;
margin-bottom:20px;
text-align:center;
background:#3498db;
color:white;
border:2px solid #2c3e50;
}

Конечно, можно улучшить полосу прокрутки, но об этом я напишу в отдельной статье, чтобы не сбивать вас с главной темы этой статьи - inline-block.
Вообщем-то это и всё. Такая сетка из блоков может просто улучшить вашу жизнь за монитором, при создании сайта :). Ведь она не требует создания дополнительных float-ов, br-ов, таблиц и прочего ненужного кода. Более того inline-block подстраивается под мобильные экраны и может стать хорошей базой для создания адаптивного сайта.



Комментарии

Комментариев пока нет. Оставь тут свой комментарий или анекдот!


Комментарии к посту






Американская мечта: начать делать деньги, затем делать деньги при помощи денег и, наконец, делать большие деньги при помощи больших денег.

Пол Эрдман


Norway
Жук-навозник (Geоtrupes) способен передвигать тяжесть, превышающую его массу в 90 раз. Из-за отсутствия навозных жуков в фауне Австралии в конце XIX века едва не разразилась экологическая катастрофа: коровий навоз стал отравлять местную растительность.

[ Интересные факты о мире ]






как сделать картинку рядом текстом, в одном блоке. html, css
Кнопка "открыть текст", которая скрывает часть текста, а после нажатия открывает.
Общество, мир Страшное и мистическое факты и мир Крым Тайны истории про ссср тунис Выборг турция Петербург и окрестности Последние новости






×

Рассказы из категории: Создание сайта (html,css,php,js)