Как поставить 2 блока рядом css

Как расположить два блока рядом css

Для того чтобы расположить рядом для элемента, например , которые по умолчанию блочные элементы, а значит занимают всю доступную ширину экрана, достаточно изменить тип отображения ( display ) на значение inline-block, и элементы встанут в ряд. Рассмотрим пример. Исходный HTML имеет вид:

  class="block">Первый  class="block">Второй  

.block  display: inline-block; border: 1px solid blue; margin: 2px; > 

С таким вариантом есть одна особенность. Если, к примеру, текст в во втором блоке будет сильно длинный, то браузер перенесет этот блок на новую строку чтобы уместить содержимое, и отобразить контент полностью.

Чтобы этого избежать можно применить другой способ, как расположить два блока рядом. Добавим в исходный HTML обертку, и назначим ему способ отображение как flex элемент. Во первых, наши элементы встанут в ряд, а во вторых, они не будут переносится на следующую строку. Вместо этого просто появится полоса прокрутки.

  class="wrapper">  class="block">Первый  class="block">Второй   

.wrapper  display: flex; > .block  display: inline-block; border: 1px solid blue; margin: 2px; > 

Два блока DIV рядом по горизонтали.

Помогите пожалуйста ни как не могу сделать чтоб два блока DIV были рядом по горизонтали и чтоб между ними был небольшой отступ, в каждый блоки вставлено картинку нужно чтоб эти картинки были рядом а то у меня они почемуто по разные стороны монитора

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

2 блока div нужно рядом поставить
Есть сайт zhenskii-portal.ru под шапкой есть баннер слева, и должен быть такой же баннер справа.

как в html сделать два блока в одной таблицы по горизонтали
как в html сделать два блока в одной таблицы по горизонтали .

Как поставить два блока рядом
div же с новой строки начинает всегда. Как поставить два блока рядом? На каждый вопрос.

Два рядом стоящих блока div- CSS
Из бд вывожу картинку, а слева от нее блок div. Эта картинка выносится автоматически на передний.

2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4

1 2 3 4

div class="wrapper"> div class="left_block">/div> div class="right_block">/div> /div>

1 2 3 4 5 6 7 8 9 10 11

div.wrapper { width:450px; } div.left_block { float:left; width:200px; } div.right_block { float:right; width:200px; }

Размещение двух блоков div рядом друг с другом

В HTML и CSS часто возникает необходимость размещения двух или нескольких блоков div рядом друг с другом. Но при этом могут возникнуть некоторые проблемы, например, один блок может автоматически получить отступы при изменении его ширины в процентах, что приводит к его неидеальному выравниванию с соседним блоком. Также при увеличении масштаба страницы один блок может сместиться под другой, что приводит к нарушению жидкости отображения.

 
Left side div
 
Right side div
 
 

#left < float: left; width: 65%; overflow: hidden; >#right

В приведенном выше примере, блок с идентификатором «left» имеет ширину 65% и свойство float: left; , что позволяет ему располагаться слева от других блоков. Однако при увеличении его ширины в процентах, этот блок автоматически получает отступы, из-за чего он не идеально выравнивается с блоком «right». Кроме того, при увеличении масштаба страницы блок «right» может сместиться под блок «left», что приводит к нарушению жидкости отображения.

Чтобы решить эти проблемы, можно использовать свойство display: flex; для родительского блока. Это свойство делает блок гибким контейнером, и его дочерние элементы автоматически становятся гибкими элементами.

#wrapper < display: flex; >#left < width: 65%; >#right

В этом примере, блоки «left» и «right» автоматически выравниваются по горизонтали, без каких-либо автоматических отступов, и они не смещаются друг под друга при увеличении масштаба страницы. Таким образом, можно добиться жидкого отображения двух блоков div, расположенных рядом друг с другом.

Свойство float

Свойство float в CSS занимает особенное место. До его появления расположить два блока один слева от другого можно было лишь при помощи таблиц. Но в его работе есть ряд особенностей. Поэтому его иногда не любят, но при их понимании float станет вашим верным другом и помощником.

Далее мы рассмотрим, как работает float , разберём решения сопутствующих проблем, а также ряд полезных рецептов.

Как работает float

float: left | right | none | inherit;

При применении этого свойства происходит следующее:

1. Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left ) или вправо (для right ) до того как коснётся либо границы родителя, либо другого элемента с float .
2. Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
3. Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
4. Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.

1. Элемент при наличии float получает display:block . То есть, указав элементу, у которого display:inline свойство float: left/right , мы автоматически сделаем его блочным. В частности, для него будут работать width/height . Исключением являются некоторые редкие display наподобие inline-table и run-in (см. Relationships between „display“, „position“, and „float“)
2. Ширина float -блока определяется по содержимому. («CSS 2.1, 10.3.5»).
3. Вертикальные отступы margin элементов с float не сливаются с отступами соседей, в отличие от обычных блочных элементов.

Это пока только теория. Далее мы рассмотрим происходящее на примере.

Текст с картинками

Одно из первых применений float , для которого это свойство когда-то было придумано – это вёрстка текста с картинками, отжатыми влево или вправо.

Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство float :

Её HTML-код выглядит примерно так:

 
Текст.
 
Текст.
 
Текст.
 
Текст.
 

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

Посмотрим, например, как выглядело бы начало текста без float:

1. Элемент IMG вынимается из документа потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):

1. Элемент IMG сдвигается максимально вправо(при float:right ):

1. Строки, в отличие от блочных элементов, «чувствуют» float и уступают ему место, обтекая картинку слева:

При float:left – всё то же самое, только IMG смещается влево (или не смещается, если он и так у левого края), а строки – обтекают справа

Строки и инлайн-элементы смещаются, чтобы уступить место float . Обычные блоки – ведут себя так, как будто элемента нет.

Чтобы это увидеть, добавим параграфам фон и рамку, а также сделаем изображение немного прозрачным:

Как видно из рисунка, параграфы проходят «за» float . При этом строки в них о float’ах знают и обтекают их, поэтому соответствующая часть параграфа пуста.

Блок с float

Свойство float можно поставить любому элементу, не обязательно картинке. При этом элемент станет блочным.

Посмотрим, как это работает, на конкретной задаче – сделать рамку с названием вокруг картинки с Винни.

HTML будет такой:

Винни-Пух
 
Кадр из советского мультфильма
 
 
Текст.
 

…то есть, div.left-picture включает в себя картинку и заголовок к ней. Добавим стиль с float :

.left-picture < float: left; /* рамочка и отступ для красоты (не обязательно) */ margin: 0 10px 5px 0; text-align: center; border: 1px solid black; >

Заметим, что блок div.left-picture «обернул» картинку и текст под ней, а не растянулся на всю ширину. Это следствие того, что ширина блока с float определяется по содержимому.

Очистка под float

Разберём ещё одну особенность использования свойства float .

Для этого выведем персонажей из мультфильма «Винни-Пух». Цель:

Реализуем её, шаг за шагом.

Шаг 1. Добавляем информацию

Попробуем просто добавить Сову после Винни-Пуха:

Винни-Пух
 
Сова
 

Результат такого кода будет странным, но предсказуемым:

• Заголовок
  

  Сова

  не заметил float (он же блочный элемент) и расположился сразу после предыдущего параграфа

  ..Текст о Винни..

  .

• После него идёт float -элемент – картинка «Сова». Он был сдвинут влево. Согласно алгоритму, он двигается до левой границы или до касания с другим float -элементом, что и произошло (картинка «Винни-Пух»).
• Так как у совы float:left , то последующий текст обтекает её справа.

Шаг 2. Свойство clear

Мы, конечно же, хотели бы расположить заголовок «Сова» и остальную информацию ниже Винни-Пуха.

Для решения возникшей проблемы придумано свойство clear .

clear: left | right | both;

Применение этого свойства сдвигает элемент вниз до тех пор, пока не закончатся float’ы слева/справа/с обеих сторон.

Применим его к заголовку H2 :

Результат получившегося кода будет ближе к цели, но всё ещё не идеален:

Элементы теперь в нужном порядке. Но куда пропал отступ margin-top у заголовка «Сова»?

Теперь заголовок «Сова» прилегает снизу почти вплотную к картинке, с учётом её margin-bottom , но без своего большого отступа margin-top .

Таково поведение свойства clear . Оно сдвинуло элемент h2 вниз ровно настолько, чтобы элементов float не было сбоку от его верхней границы.

Если посмотреть на элемент заголовка внимательно в инструментах разработчика, то можно заметить отступ margin-top у заголовка по-прежнему есть, но он располагается «за» элементом float и не учитывается при работе в clear .

Чтобы исправить ситуацию, можно добавить перед заголовком пустой промежуточный элемент без отступов, с единственным свойством clear:both . Тогда уже под ним отступ заголовка будет работать нормально:

Винни-Пух
 
Сова
 

  
Свойство clear гарантировало, что будет под картинкой с float .
  
Заголовок 
Сова
 идёт после этого . Так что его отступ учитывается.

Заполнение блока-родителя
Итак, мы научились располагать другие элементы под float . Теперь рассмотрим следующую особенность.
Из-за того, что блок с float удалён из потока, родитель не выделяет под него места.
Например, выделим для информации о Винни-Пухе красивый элемент-контейнер :
Винни-Пух 
Текст.
 
.hero
Элемент с float оказался выпавшим за границу родителя .hero .
Чтобы этого не происходило, используют одну из следующих техник.
Поставить родителю float
Элемент с float обязан расшириться, чтобы вместить вложенные float .
Поэтому, если это допустимо, то установка float контейнеру всё исправит:
.hero
Разумеется, не всегда можно поставить родителю float , так что смотрим дальше.
Добавить в родителя элемент с clear
Добавим элемент div style="clear:both" в самый конец контейнера .hero .
Он с одной стороны будет «нормальным» элементом, в потоке, и контейнер будет обязан выделить под него пространство, с другой – он знает о float и сместится вниз.
Соответственно, и контейнер вырастет в размере:
Винни-Пух 
Текст.
 
Результат – правильное отображение, как и в примере выше. Открыть код.
Единственный недостаток этого метода – лишний HTML-элемент в разметке.
Универсальный класс clearfix
Чтобы не добавлять в HTML-код лишний элемент, можно задать его через :after .
.clearfix:after < content: "."; /* добавить содержимое: "." */ display: block; /* сделать блоком, т.к. inline не может иметь clear */ clear: both; /* с обеих сторон clear */ visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */ height: 0; /* сделать высоту 0, чтобы не занимал место */ >
Добавив этот класс к родителю, получим тот же результат, что и выше. Открыть код.
overflow:auto/hidden
Если добавить родителю overflow: hidden или overflow: auto , то всё станет хорошо.
.hero
Этот метод работает во всех браузерах, полный код в песочнице.
Несмотря на внешнюю странность, этот способ не является «хаком». Такое поведение прописано в спецификации CSS.
Однако, установка overflow может привести к появлению полосы прокрутки, способ с псевдоэлементом :after более безопасен.
float вместо display:inline-block
При помощи float можно размещать блочные элементы в строке, похоже на display: inline-block :

  
 
Картинка 1
  
 
Картинка 2
  
 
Картинка 3
  
 
Картинка 4
  
 
Картинка 5
  
 
Картинка 6
  
 
Картинка 7
  
 
Картинка 8
  
 
Картинка 9


.gallery li
Элементы float:left двигаются влево, а если это невозможно, то вниз, автоматически адаптируясь под ширину контейнера, получается эффект, аналогичный display: inline-block , но с особенностями float .
Вёрстка в несколько колонок
Свойство float позволяет делать несколько вертикальных колонок.
float:left + float:right
Например, для вёрстки в две колонки можно сделать два . Первому указать float:left (левая колонка), а второму – float:right (правая колонка).
Чтобы они не ссорились, каждой колонке нужно дополнительно указать ширину:
Шапка
 
 

.column-left < float: left; width: 30%; >.column-right < float: left; width: 70%; >.footer
Результат (добавлены краски):
body, html < margin: 0; padding: 0; >.column-left < float: left; width: 30%; >.column-right < float: left; width: 70%; overflow: auto; /* расшириться вниз захватить float'ы */ >.footer < clear: both; >.inner
Шапка
Персонажи:

  
Винни-Пух
  
Ослик Иа
  
Сова
  
Кролик

Винни-Пух
Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.
В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.
Низ
В эту структуру легко добавить больше колонок с разной шириной. Правой колонке можно было бы указать и float:right .
float + margin
Ещё вариант – сделать float для левой колонки, а правую оставить в потоке, но с отбивкой через margin :
.column-left < float: left; width: 30%; >.column-right < margin-left: 30%; >.footer
Результат (добавлены краски):
body, html < margin: 0; padding: 0; >.column-left < float: left; width: 30%; >.column-right < margin-left: 30%; width: 70%; overflow: auto; /* расшириться вниз захватить float'ы */ >.footer < clear: both; >.inner
Шапка
Персонажи:

  
Винни-Пух
  
Ослик Иа
  
Сова
  
Кролик

Винни-Пух
Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.
В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.
Низ
В примере выше – показана небольшая проблема. Колонки не растягиваются до одинаковой высоты. Конечно, это не имеет значения, если фон одинаковый, но что, если он разный?
В современных браузерах (кроме IE10-) эту же задачу лучше решает flexbox.
Для старых есть различные обходы и трюки, которые позволяют обойти проблему в ряде ситуаций, но они выходят за рамки нашего обсуждения.
Читать:
Как удалить автокад полностью с компьютера на виндовс 10