Как составить блоки горизонтально - Autoru.top - решение различных проблем

Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.

Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.

Из чего выбрать или методы

Существует несколько способов расположения структурных элементов в ряд в горизонтальной плоскости. Наиболее полезными, с точки зрения практического применения, являются:

метод «Float»
метод «Inline-block»
метод «Table-cell»

Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.

«Для рывка» или немного теории

Все структурные элементы HTML можно условно разделить на:

Инлайновые (встроенные) — типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.

Блочные — занимающие всю ширину родительского блока, всегда начинаются с новой строки — p, h, div.

Наглядный пример встроенных и блочных структур приведен ниже:

Метод «Float»

Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.

Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float.

CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.

Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.

Для примера, создадим четыре блока, которые нужно разместить в ряд:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    </head>
    <body>
        <div class="bblock">Строим</div>
        <div class="bblock">горизонтальный</div>
        <div class="bblock">ряд</div>
        <div class="bblock">из дивов</div>
    </body>
</html>

И внешнюю таблицу стилей с следующим содержимым:

div {
     float: left; /*Задаем обтекание*/
     line-height: 120px;/*Высота строки +  верт. центрирования текста*/
     font-size: 40px;
     background: dodgerblue;
     color: white;
     margin-top: 60px;
     width: 320px; /*Фиксируем ширину блока*/
     margin-right: 10px;
     text-align: center; /*Центрируем текст по горизонтали*/
    }

В результате получаем четыре блока, расположенные в горизонтальный ряд и выровненные по левому краю родительского блока:

Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:

Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили — выровнял по правому краю. Учтите этот момент при использовании свойства float: right.

Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:

<div style="clear: both;"></div>

В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?

Алгоритм действий следующий.

HTML:

<div class="wrap"> <!--Создаем дополнительную обертку-родительский элемент -->
            <div class="bblock">Строим</div>
            <div class="bblock">горизонтальный</div>
            <div class="bblock">ряд</div>
            <div class="bblock">из дивов</div>
</div>

CSS:

.wrap {
         width: 1310px;/*фиксируем ширину обертки*/
         margin: 0 auto;/*центрируем ее*/
         background: darkgray;
         height: 120px;/*Задаем высоту обертки*/
        }
 
.bblock {
        float: left; /*Задаем обтекание*/
        line-height: 120px;/*Высота строки +  верт. центрирования текста*/
        font-size: 40px;
        background: dodgerblue;
        color: white;
        width: 320px; /*Фиксируем ширину блока*/
        margin-right: 10px;
        text-align: center; /*Центрируем текст по горизонтали*/
}
.wrap :last-child {
        margin-right: 0px;/*Убираем поле последнего div-а*/
                       }

В результате получаем такую картину:

Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.

Важно!!!

Ширина блоков должна быть фиксированной. Иначе получите что-то такое:
При уменьшении размера родительского блока или окна веб-браузера, не вмещающиеся блоки перемещаются вниз друг под дружку. Чтобы исключить такой косяк, примените свойство min-width.
Не забывайте указывать !DOCTYPE вашего документа, иначе, при отображении страницы в IE, применив описанный выше метод горизонтального размещения блоков, у вас появится отступ справа порядка 17px (наверное разработчики под скролл разметили).
Во избежание различий отображения страницы в разных браузерах, некоторые веб-мастера рекомендуют задавать точные значения свойств margin и padding для body.
В отличии от метода «Inline-block» вы не столкнетесь с наличием зазора между блоками при отсутствии margin-ов.
Для задания отступов и полей при размещении элементов воспользуйтесь свойствами margin и padding.

Метод «Inline-block»

Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?

Встречайте, гвоздь программы — свойство display: inline-block.

display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства — позволяет изменять линейные размеры, задавать поля, отступы и т.д.

Блочно-строчный элемент имеет следующие свойства:

высота и ширина блока определяется автоматически по содержимому и значению отступов (padding)
высота и ширина блока может быть задана фиксировано
Отсутствует эффект схлопывания границ.

Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.

HTML:

        <div class="nav">
            <p><img src="./vaden-pro-logo.png" alt=""  /></p>
            <p class="string"><a href="#">Ссылка меню 1 длиннее обычного</a></p>
        </div>
        <div class="nav">
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p class="string"><a href="#">Ссылка меню 2</a></p>
        </div>
        <div class="nav">
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p class="string"><a href="#">Ссылка меню 3</a></p>
        </div>
        <div class="nav">
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p class="string"><a href="#">Ссылка меню 4</a></p>
        </div>

CSS:

.nav {
	display: inline-block; /*Задаем блочно-строчное отображение*/
  	width: 180px; /*задаем ширину блока*/
	background: dodgerblue;
        }
 
        .string {
         text-align: center; /*Равняем текст по-горизонтали*/
        }

В результате получаем такую менюшку:

Как видим, получилось кривовато… Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):

Теперь наша навигационная панель выровнялась по верхней линии:

Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр!!!

Важно!!!

При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список:
HTML:
```
 <ul>
           <li>Зазор</li>
           <li>между</li>
           <li>блоками</li>
</ul>
```
CSS:
```
li {
        display: inline-block;
   	width: 180px;
 	background: darkgrey;
        color: gold;
        line-height: 120px;
        font-size: 32px
        text-align: center;
        }
```
Результатом рендеринга такого кода будет следующая картина:

Есть несколько способов убрать зазоры:
- подобрать отрицательные значения margin:
- указать font-size: 0 для родительского блока и font-size ≠0 для инлайнового;
```
        ul { font-size: 0px;}
        li {font-size: 32px;}
```
- не очень красиво, но все же… Написать код в одну строчку
```
<li>Зазор</li><li>между</li><li>блоками</li>
```
Результатом применения любого из выше перечисленных приемов будет следующая структура:
Если у вас несколько блочно-строчных элементов подряд имеют разную высоту, то им необходимо задать свойство vertical-align: top. Напомню, что по умолчанию vertical-align присвоено значение baseline.
Кросс-браузерность.

Для древних версий Firefox добавляем строчку:
```
display: -moz-inline-stack;
```
и оборачиваем элемент в дополнительную div-обертку.

IE 7 и более ранние версии — добавляем строчки:

 zoom: 1; /*задаем hasLayout*/
*display: inline; /*звездочка — хак для IE */
_height: 250px; /*в IE6 не работает min-height*/

Замечу, что на указанные строчки избирательно реагируют конкретные браузеры (на первую — Firefox, на остальные — IE).

Метод «Table»

Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.

Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.

Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:

<div class="wrap">
  <div class="bblock">Строим</div>
  <div class="bblock">табличный</div>
  <div class="bblock">ряд</div>
  <div class="bblock">из дивов</div>
  </div>

.bblock {
	display: table-cell;
        font-size: 32px;
  	width: 200px;
        height: 200px;
	background: gold;
        text-align: center;
        vertical-align: middle;
}
 
.wrap {
  display: table;
  border-spacing: 20px 20px;
  background-color: darkgray;
}

Важно!!!

В отличии от методов «Inline-block» и «float», при уменьшении ширины окна веб-браузера, ячейки не перемещаются вниз.
У вас нет возможности задавать свойство margin для ячеек псевдотаблицы.
Кросс-браузерность. Свойства из семейства display: table* не поддерживаются IE6, IE7. Кроме того, в IE8 вы можете наблюдать динамическую ошибку рендеринга псевдотабличных элементов в виде рандомно пропадающих ячеек. Данная ошибка чаше всего проявляется при первичной прорисовке документа

Источник

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100% адаптацией и кроссбраузерностью. В просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.

Наша цель сделать 3-х колоночный сайт, блоки которого будут:

Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
Адаптироваться при уменьшении заданных размеров.

И так приступим, для того, чтобы сделать горизонтальные 3 колонки мы будем использовать свойство display: inline-block, да-да, свойство float уже не так актуально, но оно нам все же понадобится.
Прежде чем задать им свойства, создадим 3 блока обернув их в классы main и inline:

<div class="main inline">
<div class="left-block">left</div>
<div class="content">content</div>
<div class="right-block">right</div>
</div>

Далее будет логично написать стили для этих классов, что мы и сделаем:

<style>
html, body{margin:0;padding:0;}
.main {
margin:0 auto; /* Центрируем блоки */
width:100%; /* Задаем ширину 100%, чтобы сделать ее резиновой */
max-width:700px; /* Устанавливаем максимальную ширину */
}
.inline div{
display:inline-block; /* Делаем блоки по горизонтали */
display: -moz-inline-stack; /* Для FireFox 2, тот же самый, что и inline-block */
vertical-align:top; /* Выравниваем их сверху */
font-size:16px; /* Ставим дочкам размер шрифта, иначе примет значение родителя */
/* Для IE 6 и IE 7 чтобы блоки были по горизонтали*/
zoom: 1;
*display: inline;

}
div.inline{font-size:0;} /* Ставим родителю значение 0, чтобы убрать отступы у блоков*/
.left-block{
background:red;
width:20%; /*Задаем ширину в процентах чтобы сделать ее резиновой*/
height:300px; /* Высота блока */
}
.content{
background:green;
width:60%;
height:300px;
}
.right-block{
background:blue;
width:20%;
height:300px;
}
</style>

Результат:

Размер окна браузера больше 900px

Размер окна браузера меньше 900px

Иногда нужно, чтобы дизайн сайта не сразу адаптировался под конкретные размеры, т.е. не исчезали какие-либо части сайта, а сохранялся весь функционал просто с уменьшением их размера.

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.

Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался добавляем в стили @media запрос:

/* Простой пример @media запроса*/
@media (max-width:600px){
.inline div{
display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */
width:100%; /* Задаем на всю ширину экрана */
height:100px;
}
}

Более подробно можно посмотреть здесь — приветствуется любое изменение кода в лучшую его сторону.

Источник

<div id="main">
<div></div>
<div></div>
<div></div>
</div>

Нужно отобразить блоки #main div по горизонтали, так, чтобы не переносились на новую строку, если достигли предела ширину блока #main.

Пробовал float:left; display:inline-block;

SVE

22.3k10 золотых знаков55 серебряных знаков115 бронзовых знаков

задан 2 апр 2014 в 2:05

HTML

<div id="main">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

CSS

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    html, body{
        height: 100%;
    }
    body{
        background-color: #ccc;
    }

    div {
        border: 1px solid #fff;
        margin:10px;
        text-align: center;
    }
    #main{
        width: 1119px;
        height: 150px;
        overflow: hidden;
    }
    #main>div{
        width: 150px;
        height: 120px;
        display: inline-block;
    }
    </style>

Пример

ответ дан 2 апр 2014 в 4:50

не проще ли для всех троих блоков задать ширину и высоту а потом просто добавит ко всем float:left

soledar10

27.4k5 золотых знаков33 серебряных знака65 бронзовых знаков

ответ дан 2 апр 2014 в 12:43

Роман СоколовРоман Соколов

6293 золотых знака20 серебряных знаков49 бронзовых знаков

Очень легко: блокам display: inline-block; родителю white-space: nowrap;. Таким образом мы запрещаем перенос строк.

ответ дан 30 дек 2017 в 12:13

BarezaBareza

10510 бронзовых знаков

Решение без переноса:

.main
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.main__item
{
  background: orange;
  padding: 10px;
  margin-right: 5px;
}

<div id="main" class="main">
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
</div>

Решение с переносом:

.main
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.main__item
{
  background: orange;
  padding: 10px;
  margin-right: 5px;
}

<div id="main" class="main">
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
</div>

Кроссбраузерность без переноса:

upd: с переносом думаю сами додуматесь?

.main
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.main__item
{
  background: orange;
  padding: 10px;
  margin-right: 5px;
}

<div id="main" class="main">
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
  <div class="main__item">Вася</div>
  <div class="main__item">Петя</div>
  <div class="main__item">Миша</div>
  <div class="main__item">Сыр</div>
</div>

ответ дан 26 апр 2018 в 11:37

Михаил Р.Михаил Р.

1,5523 золотых знака15 серебряных знаков31 бронзовый знак

Источник

Это перевод этой и вот этой статей с woorkup.com

Правда, совет не для старого ослика (IE6).

Основная идея этого совета — использовать div-обертку (wrapper) и селектор CSS :first-child.

Итак, надо: сделать на странице несколько блоков, равномерно распределенных по горизонтали:

Исходный код такой разметки предельно прост:

<div id="wrapper">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Для того, чтобы горизонтально расположить блоки в оболочке, нам потребуется всего несколько строк CSS кода. Первое, что приходит в голову: объявить класс .section со свойствами width и margin-right, с нужными нам значениями. Но при этом правый отступ крайнего правого элемента будет выступать за границы оболочки:

Так как правый отступ крайнего правого элемента превышает ширину оболочки, по правилам разметки крайний правый блок «уйдет» вниз:

Возникает вопрос: как убрать «лишний» отступ у крайнего правого блока без специального CSS класса, у которого свойство margin-right будет задано 0?

Именно здесь и стоит вспомнить о селекторе :first-child, и инвертировать правые отступы на левые. Таким образом, чтобы у первого блока отступ слева был нулевым. Напрашивается вопрос: зачем инвертировать? Все дело в том, что в IE7|8 поддержка :first-child добавлена, а :last-child нет.

Итак, давайте посмотрим на CSS код решения. Сперва определим оболочку:

#wrapper {
    width:320px;
    height:60px;
    background:#EFEFEF;
}

Теперь объявим класс содержимого оболочки .section:

.section {
    border:solid 1px #999;
    float:left;
    height:58px;
    margin-left:10px;
    width:98px;
}

В примере используются фиксированные значения свойств width и margin-left. Вы на свое усмотрение можете использовать и процентные значения.

Теперь нам надо убрать отступ слева у первого блока, делается это так:

#wrapper div:first-child {
margin-left:0px;
}

Как уже было сказано выше, единственный недостаток этого подхода то, что IE6 не поддерживает селектор :first-child. В этом случае придется использовать условные комментарии для того, чтобы объявить-таки отдельный класс (например, .section-first). Свойства этого класса будут с теми же значениями, что в классе .section, только свойство margin-left = 0.

Источник

In this article, we will learn about aligning 2 divs beside each other in HTML. The <div> tag is a block-level element i.e. it always starts on a new line and takes all the width available to both left and right sides. It also has a top and a bottom margin. The <div> tag is used to separate a block of content or to define a section in HTML. The main use of <div> tag is as a container for HTML elements. It enables the use of CSS and JavaScript on these elements easier. Class and id attributes can be used with these tags.

The problem of aligning 2 divs horizontally: Since <div> tag is a block element, only one div can be placed in a line, and all the space to the left and right is taken by it. Let’s look at the below example to understand it better.

Example: Here is the demonstration of the above explanation.

HTML

<!DOCTYPE html>

<html>

<body>

<a>Click here!</a>

<a>This is a link</a>

</body>

</html>

Output:

Here, 2 anchor tags are used. Since the anchor tag is an inline element, the second link comes right after the first one in the output. However, the second link can be made to go to the next line if we use the <div> tag. This is illustrated by the below example:

Example: Here is the demonstration of the above explanation

HTML

<!DOCTYPE html>

<html>

<body>

<a>Click here!</a>

<div><a>This is a link</a></div>

</body>

</html>

Output:

It is clearly visible that the use of the <div> tag took the second link on the other line because it acquires the entire line width. If <div> was an inline tag, then by default two divs would align horizontally.

Ways to align 2 divs horizontally: We have two divs that can be aligned horizontally with the use of CSS. There are several ways to perform this task. We will understand all the concepts in a sequence.

1. Using a global class for both the divs: We can put both the divs in one parent div with a class attribute. The class attribute value will be used to style the divs. In the example, both the div tags are enclosed inside another <div> tag which has the class main. This is then used in the <head> section, inside the <style> tag. The CSS float property specifies the position of an element.

Syntax:

float: left|right|initial|inherit|none;

Attribute values:

none: It is the default value of a float property. The element must not float.
inherit: property must be inherited from its parent element.
left: Place an element on its container’s right.
right: Place an element on its container’s left.
initial: Property is set to its default value.

The CSS clear property specifies the flow of an element next to a floated element. The default value of clear is none.

Syntax:

clear: none;

Example: Here is the demonstration of the above explanation

HTML

<!DOCTYPE html>

<html>

<head>

<style>

.main div {

float: left;

clear: none;

}

</style>

</head>

<body>

<div class="main">

<div>

<p>1.</p>

<p>2.</p>

<p>3.</p>

</div>

<div>

<p>GeeksforGeeks</p>

<p>Geeks Portal</p>

<p>Writing Portal</p>

</div>

</body>

</html>

Output:

2. Using flex property: The flex property in CSS is the combination of flex-grow, flex-shrink, and flex-basis properties. It is used to set the length of flexible items. The flex property is much more responsive and mobile-friendly. It is easy to position child elements and the main container. The margin doesn’t collapse with the content margins. The order of any element can be easily changed without editing the HTML section. We can combine with a parent div class, and CSS flex property can be used to align two divs next to each other.

The CSS flex property is used to set a flexible length for flexible elements.

Syntax:

flex: flex-grow flex-shrink flex-basis|initial|auto|inherit;

Property Values:

flex-grow: A number that specifies how many items will grow relative to the rest of the flexible items.
flex-shrink: A number that specifies how many items will shrink relative to the rest of the flexible items.
flex-basis: It sets the length of items. Legal values of flex-basis are: auto, inherit, or a number followed by %, em, px, or any other length unit.

Example: In this example, we have used a display property whose value is set to flex which is used to set the length of flexible items.

HTML

<!DOCTYPE html>

<html>

<head>

<style>

.main {

display: flex;

}

</style>

</head>

<head>

<div class="main">

<div>

<p>1.</p>

<p>2.</p>

<p>3.</p>

</div>

<div>

<p>GeeksforGeeks</p>

<p>Geeks Portal</p>

<p>Writing Portal</p>

</div>

</head>

</html>

Output:

3. Individual styling of divs: The two <div> tags can also be individually styled using the style property.

Example: Here we are using the above approach.

HTML

<!DOCTYPE html>

<html>

<body>

<div style="float: left; width: 50%">

<p>1.</p>

<p>2.</p>

<p>3.</p>

</div>

<div style="float: right; width: 50%">

<p>GeeksforGeeks</p>

<p>Geeks Portal</p>

<p>Writing Portal</p>

</div>

</body>

</html>

Output: The first <div> tag is floated to the left and the second <div> tag is floated to the right. However, they are aligned to each other horizontally with a lot of space. The width can be changed for changing this space.

Last Updated :
04 May, 2023

Like Article

Save Article

Источник

Из чего выбрать или методы

«Для рывка» или немного теории

Метод «Float»

Метод «Inline-block»

Метод «Table»

Решение без переноса:

Решение с переносом:

Кроссбраузерность без переноса:

HTML

HTML

HTML

HTML

HTML

Не пропустите также: