Два блока рядом друг с другом CSS
Два блока рядом друг с другом CSS
| |
![]() Тематические порталы
|
При формировании той или иной страницы на сайте иногда возникает необходимость создать колонки с тем или иным содержимым, которые находились рядом друг с другом. По умолчанию блоки <div> не располагаются рядом друг с другом, а идут по порядку снизу.
Вопросы по теме статьи или любые другие можно оставить на странице обсуждения.
Создание блоков в HTML
Для начала нам нужно создать в HTML два блока <div>
на нашей странице:
<div id="block1">Текст</div>
<div id="block2">Текст</div>
Оформление блоков DIV рядом друг с другом по горизонтали
Чтобы блоки расположить рядом друг с другом в одну линию необходимо прописать в CSS двум элементам следующие параметры:
#block1 {
float: left;
display: block;
width: 300px;
border: 1px solid blue;
margin: 2px;
}
#block2 {
float: left;
display: block;
width: 300px;
border: 1px solid blue;
margin: 2px;
}
На выходе получим результат, как показано на изображении справа.
float
- можно придать значения "left" и "right", фактический означает к какой стороне прикрепить блок, можно например первый блок разместить слева, второй справа и они хорошо впишутся. Пример смотрите в конце статьи в созданном шаблоне.display: block;
- выводит div блоком.
Дополнительные настройки
Остальные параметры носят декоративный характер:
width
- задаём размер блокамborder
- настраиваем границу блоковmargin
- внешние отступы, чтобы блоки не прилипали друг к другу
Примечание
Исходный файл можно скачать по ссылке.
Если же возникли трудности с вёрсткой на CSS или есть вопросы по данной статье, то задавайте их в специально созданной теме про CSS на нашем форуме.