Как поместить один блок на другой css
Перейти к содержимому

Как поместить один блок на другой css

  • автор:

Вложенные флекс-контейнеры

Флексбокс по своей сути является моделью одномерного макета. Флекс-элементы внутри флекс-контейнера можно размещать как горизонтально, так и вертикально, но не одновременно. Если вы хотите располагать элементы в двух направлениях, вам потребуется вставить один флекс-контейнер в другой.

В данном примере мы применяем display: flex одновременно к внешнему контейнеру и к красному флекс-элементу. Но с красным флекс-элементом мы используем flex-direction: column , в результате чего его флекс-элементы располагаются вертикально друг под другом. Значением по умолчанию для flex-direction является row , поэтому мы не стали использовать это свойство для внешнего контейнера — по умолчанию флекс-элементы располагаются в ряд.

Двумерные макеты сайтов

Когда мы разбирали пример макета Святого Грааля, то использовали флексбоксы только для средней части, а шапку и подвал оставили блочными элементами. Мы применяли флексбоксы для размещения трёх флекс-элементов по горизонтали (в ряд), но не задавали флекс-элементы по вертикали (в колонку). Другими словами, у нас был одномерный макет. Несмотря на то, что страница в целом представляла собой двумерный макет, флексбоксы поддерживают макет только в одном из этих измерений.

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

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

Горизонтальный макет состоит из , и . Все они содержатся во втором ряду, но их необходимо разместить горизонтально. Следовательно, мы можем сделать второй ряд флекс-контейнером и заставить его содержимое выстроиться в ряд.

Итак, вот рабочий пример.

В нашем случае мы использовали следующий код для элемента .

body

display: flex делает флекс-контейнером, а flex-direction: column отображает его флекс-элементы в колонку. Мы также задали минимальную высоту для внешнего флекс-контейнера, чтобы макет занимал всю высоту экрана.

А теперь для вложенного флекс-контейнера.

#main

Добавление display: flex делает #main флекс-контейнером, подобно . Теперь его дочерние элементы становятся флекс-элементами. flex: 1 гарантирует, что он будет расти так, чтобы занимать максимум доступного пространства.

Мы могли бы добавить flex-direction: row , чтобы явно указать направление, но в любом случае row является значением по умолчанию.

Остальное — просто стилизация и упорядочивание флекс-элементов во вложенном флекс-контейнере.

#main > article < flex: 1; >#main > nav, #main > aside < flex: 0 0 20vw; background: beige; >#main > nav

Вы можете спросить, зачем использовать вложенные флекс-контейнеры, когда можно просто сделать одномерный макет, как в предыдущем примере. В большинстве случаев вам, вероятно, не придётся применять вложенные флекс-контейнеры, тем не менее этот метод может пригодиться при использовании адаптивного веб-дизайна. Когда весь макет сделан на флексбоксах, то это предоставляет больше возможностей при использовании медиа-запросов для отображения разных макетов на разных устройствах и т. д. Без этого вы можете использовать всю мощь флексбоксов только для части веб-сайта.

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

Вложенные флексбоксы против CSS Grid

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

Тем не менее, существует много макетов, для которых лучше подходят флексбоксы, так что рассмотрим несколько случаев.

См. также

  • flex-direction
  • Адаптивный макет на флексбоксах
  • Направление флексбоксов
  • Свойства flex-контейнера

Как поместить один блок на другой css

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

При использовании Bootstrap очень удобно позиционировать интерфейс в виде таблицы или сетки, используя строки и столбцы. Так, если мы посмотрим в браузере на стандартное представление Index.cshtml, которое идет по умолчанию, то мы увидим подобное позиционирование: элементы под заголовком расположены как бы в три столбца и составляют одну строку:

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

 

Getting started

.

Get more libraries

.

Web Hosting

.

Класс row задает расположение отдельных блоков в виде одной строки. Строка в Bootstrap может иметь до 12 столбцов. Строк может быть сколько угодно, но в данном случае у нас одна строка.

Для создания отдельного столбца строки используется класс col-md-4 . col , как ясно из названия, обозначает столбец.

Дальше идет md — идентификатор устройства. Как мы увидели в прошлой теме, bootstrap делит все устройства условно на четыре группы в зависимости от ширины экрана. md, в частности, соотносится со средними устройствами (то есть которые имеют ширину от 992 пикселя и выше). А число 4 указывает, сколько условных единиц в строке будет занимать данный блок. Таким образом, получается, что класс col-md-4 означает, что данный блок будет занимать 4 условных единицы из 12 в строке, то есть треть ширины экрана устройства с экраном шириной от 992 пикселей.

И поскольку у нас есть четыре группы, то для каждой группы имеются свои классы. Например, для очень маленьких устройств с экраном меньше 768 пикселей (то есть мобильных телефонов), подобный класс мог бы быть таким col-xs-4 .

Все типы классов:

  • col-xs-* : для устройств с шириной экрана меньше 768 пикселей
  • col-sm-* : для устройств с шириной экрана от 768 пикселей и выше
  • col-md-* : для устройств с шириной экрана от 992 пикселя и выше
  • col-lg-* : для устройств с шириной экрана от 1200 пикселей и выше

Хотя даже на мобильных устройствах блок с классом col-md-4 будет выглядеть вполне неплохо, но мы можем установить сразу два класса, чтобы еще больше детализировать отображение на различных устройствах, например:

И хотя в представлении Index.cshtml по умолчанию все три блока имеют относительную ширину в 4 единицы, составляя в целом 12 единиц, мы можем задать любую другую ширину, позиционируя их по собственному усмотрению. Например:

Отступы

Специальные классы col-md(sm|lg)-offset-* позволяют задать смещение относительно левого блока или начала строки в условных единицах. Например, у нас есть такая строка:

 

Левый блок

.

Правый блок

.

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать следующим образом:

 

Левый блок

.

Правый блок

.

И у нас был бы тот же эффект. Но мы можем также полностью переупорядочить порядок следования блоков:

 

Левый блок

.

Правый блок

.

Теперь правый блок сместится влево на четыре единицы, а левый блок — вправо на 8 единиц:

Таким образом, используя класс row и классы столбцов, мы можем задать общее расположение элементов, а адаптивность bootstrap гарантирует, что на любых устройствах подобная сетка элементов будет выглядеть вполне нормально. Теперь рассмотрим некоторые компоненты, которые предлагает нам Bootstrap.

Вставка дочерних, сестринских и родительских элементов

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Вставка дочерних элементов и элементов-потомков

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

Методы для вставки дочерних элементов и элементов-потомков

Метод Описание
append(HTML), append(jQuery), append(HTMLElement[]) Вставляет указанные элементы в качестве последних дочерних элементов во все выбранные элементы
prepend(HTML), prepend(jQuery), prepend(HTMLElement[]) Вставляет указанные элементы в качестве первых дочерних элементов во все выбранные элементы
appendTo(jQuery), appendTo(HTMLElement[]) Вставляет элементы, содержащиеся в объекте jQuery, в качестве последних дочерних элементов в элементы, заданные аргументом
prependTo(HTML), prependTo(jQuery), prependTo(HTMLElement[]) Вставляет элементы, содержащиеся в объекте jQuery, в качестве первых дочерних элементов в элементы, заданные аргументом
append(функция), prepend(функция) Добавляет результат, возвращаемый функцией, в окончание или начало содержимого каждого из элементов, содержащихся в объекте jQuery

Для вставки дочерних элементов можно использовать также метод wrapInner(), рассматриваемый далее. Этот метод помещает новый дочерний элемент между элементом и его существующими дочерними элементами.

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

Пример использования метода append() приведен ниже:

$(function() ") .append("") .append("") .append(""); newElems.css("border", "thick solid red"); $('#row1').append(newElems); >);

В этом сценарии метод append() используется двояким образом: сначала — для построения нужного набора новых элементов, а затем — для вставки этих элементов в HTML-документ. Поскольку метод append() — первый из рассматриваемых нами методов, предназначенных для выполнения DOM-манипуляций, я затрачу немного времени на то, чтобы продемонстрировать некоторые особенности его поведения, знание которых позволяет избежать большинства распространенных ошибок, связанных с использованием jQuery для работы с DOM. Однако сначала взгляните на результаты работы данного сценария, представленные на рисунке:

Вставка новых элементов в документ

Первое, на что следует обратить внимание, — это способ, используемый для построения новых элементов с помощью метода append():

 var newElems = $(" ") .append("") .append("") .append("");

Вообще говоря, можно было бы сразу создать один цельный крупный блок HTML-кода, содержащий все необходимые элементы, но мне хотелось прояснить один из ключевых аспектов методов, манипулирующих элементами DOM. Он заключается в том, что объекты jQuery, возвращаемые этими методами, содержат те же элементы, что и объект, вызвавший метод .

Так, в данном сценарии отправной точкой служит объект jQuery, содержащий элемент div, а результатом работы каждого из вызываемых методов append() также является объект jQuery(), содержащий тот же элемент div, а не элемент, который добавляется. Это означает, что цепочка вызовов метода append(0) создает для каждого из первоначально выбранных элементов не вложенную последовательность новых элементов, а ряд новых дочерних элементов.

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

 newElems.css("border", "thick solid red");

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

Наконец, вновь созданные элементы добавляются в документ с помощью следующей строки кода:

 $('#row1').append(newElems); 

Новые элементы добавляются в каждый из элементов выбранного набора. В данном случае выборка состоит всего лишь из одного элемента (имеющего идентификатор row1), добавление которого приводит к появлению на странице изображения лилии.

Вставка содержимого в начало элементов

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

$(function() < var orchidElems = $("") .append("") .append("") .append(""); var newElems = $("") .append("") .append("") .append("").add(orchidElems); newElems.css("border", "thick solid red"); $('#row1, #row2').prepend(newElems); >);

В данном примере проявляется еще одна важная особенность методов jQuery, предназначенных для выполнения DOM-манипуляций: все элементы, передаваемые в виде аргумента любому из этих методов, добавляются в качестве дочерних элементов во все элементы, содержащиеся в объекте jQuery. В сценарии создаются два элемента div: один — для лилий, второй — для орхидей. Для объединения обоих наборов элементов в одном объекте jQuery используется метод add().

Далее в сценарии создается другой объект jQuery, содержащий элементы со значениями id, равными row1 и row2, а вставку в документ элементов, соответствующих лилиям и орхидеям, обеспечивает вызов метода prepend(). Результат выполнения сценария представлен на рисунке:

Одновременное добавление нескольких новых элементов к нескольким выбранным элементам

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

$(function() < var orchidElems = $("") .append("") .append("") .append(""); var lilyElems = $("") .append("") .append("") .append(""); $('#row1, #row2').prepend(lilyElems, orchidElems); >);

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

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

$(function() < var orchidElems = $("") .append("") .append("") .append(""); var newElems = $("") .append("") .append("") .append("").add(orchidElems); newElems.css("border", "thick solid red"); $('#row1').append(newElems); $('#row2').prepend(newElems); >);

Цель данного сценария кажется очевидной: вставить набор новых элементов в окончание элемента row1 и в начало элемента row2. Разумеется, на самом деле происходит нечто другое, как показано на рисунке:

Попытка (неудачная) дважды добавить новые элементы в документ

Действительно, элементы вставляются в окончание элемента row1, но вызов метода prepend() приводит не к их повторной вставке, а к перемещению. Для решения этой проблемы следует создать копии элементов, подлежащих вставке, с помощью метода clone(). Пересмотренный вариант сценария приведен ниже:

. $('#row1').append(newElems); $('#row2').prepend(newElems.clone());

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

Клонирование и вставка элементов

Вставка элементов из объекта jQuery

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

$(function() < var newElems = $(""); $('img').appendTo(newElems); $('#row1').append(newElems); >);

В этом сценарии мы создаем объекты jQuery, которые содержат новые элементы div и img, подлежащие вставке в документ. Затем элементы img вставляются в элемент div в качестве его дочерних элементов с помощью метода appendTo(). Конечный результат показан на рисунке:

Использование метода appendTo()

Как нетрудно заметить, выполнение сценария приводит к тому, что все элементы img перемещаются в новый элемент div, который был добавлен в элемент row1.

Вставка элементов с использованием функции

Методы append() и prepend() могут принимать в качестве аргумента также функцию. Это обеспечивает возможность динамической вставки дочерних элементов в каждый из элементов, выбранных объектом jQuery, как показано ниже:

$(function() < var orchidElems = $("") .append("") .append("") .append(""); var lilyElems = $("") .append("") .append("") .append(""); $(orchidElems).add(lilyElems).css("border", "thick solid red"); $('div.drow').append(function(index, html) < if (this.id == "row1") < return orchidElems; >else < return lilyElems; >>); >);

Функция вызывается однократно для каждого из элементов, содержащихся в объекте jQuery. Аргументами функции являются индекс элемента в выбранном наборе и строка, содержащая HTML-код обрабатываемого элемента. Переменная this ссылается на текущий элемент набора. Возвращаемый функцией результат вставляется в конце или в начале обрабатываемого элемента. Функция может возвращать HTML-строку, один или несколько объектов HTMLElement или объект jQuery.

В этом примере сначала создаются необходимые HTML-фрагменты для лилий и орхидей, после чего функция, передаваемая методу append() в качестве аргумента, возвращает нужный фрагмент, исходя из значения свойства id. Результаты работы сценария показаны на рисунке:

Динамическая вставка элементов с помощью функции

Вставка родительских элементов и элементов-предков

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

Методы для внешней вставки родительских элементов и элементов-предков

Метод Описание
wrap(HTML), wrap(jQuery), wrap(HTMLElement[]) Обертывает указанные элементы вокруг каждого из элементов, содержащихся в объекте jQuery
wrapAll(HTML), wrapAll(jQuery), wrapAll(HTMLElement[]) Обертывает указанные элементы вокруг набора элементов, содержащихся в объекте jQuery (рассматриваемых как единая группа)
wrapInner(HTML), wrapInner(jQuery), wrapInner(HTMLElement[]) Обертывает указанные элементы вокруг содержимого каждого из элементов, содержащихся в объекте jQuery
wrap(функция), wrapInner(функция) Динамически обертывает элементы с использованием функции

При обертывании элементов эти методы могут принимать HTML-фрагмент в качестве аргумента, но всегда следует проверять, чтобы этот фрагмент содержал только один внутренний элемент. В противном случае jQuery не сможет определить, что именно необходимо сделать. Отсюда следует, что каждый элемент в аргументе метода может иметь не более одного родительского и не более одного дочернего элемента.

Пример использования метода wrap() приведен ниже:

$(function() < var newElem = $("").css("border", "thick solid red"); $('div.drow').wrap(newElem); >);

В этом сценарии мы создаем новый элемент div и используем метод css() для установки значения CSS-свойства border. Затем элемент div добавляется в качестве родительского элемента по отношению ко всем элементам div с классом drow в документе. Результаты выполнения сценария представлены на рисунке:

Использование метода wrap() для добавления родительских элементов

Элементы, которые вы передаете в виде аргумента методу wrap(), вставляются между каждым из элементов, содержащихся в объекте jQuery, и его текущим родительским элементом.

Обертывание набора элементов

Когда используется метод wrap(), новые элементы клонируются, и каждый из элементов, содержащихся в объекте jQuery, получает собственный новый родительский элемент. Чтобы вставить в документ элемент, который станет родительским сразу для нескольких элементов, следует использовать метод wrapAll(), как показано ниже:

$(function() < var newElem = $("").css("border", "thick solid red"); $('div.drow').wrapAll(newElem); >);

Этот сценарий отличается от предыдущего лишь тем, что в нем используется метод wrapAll(). Страница в окне браузера показана на рисунке:

Использование метода wrapAll()

Новый элемент добавляется как общий родительский элемент для всего набора выбранных элементов.

Будьте внимательны, используя этот метод. Если выбранные элементы не имеют общих родителей, то новый элемент будет добавлен как родительский для первого из них. После этого jQuery переместит все остальные элементы так, чтобы они стали сестринскими по отношению к первому элементу:

$(function() < var newElem = $("").css("border", "thick solid red"); $('img').wrapAll(newElem); >);

В этом сценарии выбираются элементы img, и эти элементы не имеют общих родителей. Вид страницы в окне браузера представлен на рисунке:

Использование метода wrapAll() в случае элементов, не имеющих общего родителя

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

Обертывание содержимого элементов

Метод wrapInner() позволяет окружать элементами содержимое других элементов (а не сами элементы). Соответствующий пример приведен ниже:

$(function() < var newElem = $("").css("border", "thick solid red"); $('.dcell').wrapInner(newElem); >);

Метод wrapInner() вставляет новые элементы между каждым из содержащихся в объекте jQuery элементом и его дочерним элементом. В данном сценарии выбираются элементы, принадлежащие классу dcell, и содержимое каждого из них заключается в новый элемент div. Страница в окне браузера показана на рисунке:

Использование метода wrapInner()

Вставка сестринских элементов

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

Методы для вставки сестринских элементов

Метод Описание
after(HTML), after(jQuery), after(HTMLElement[]) Вставляет указанные элементы в качестве последних дочерних элементов во все выбранные элементы
before(HTML), before(jQuery), before(HTMLElement[]) Вставляет указанные элементы в качестве первых дочерних элементов во все выбранные элементы
insertAfter(HTML), insertAfter(jQuery), insertAfter(HTMLElement[]) Вставляет элементы, содержащиеся в объекте jQuery, в качестве последних дочерних элементов в элементы, заданные аргументом
insertBefore(HTML), insertBefore(jQuery), insertBefore(HTMLElement[]) Вставляет элементы, содержащиеся в объекте jQuery, в качестве первых дочерних элементов в элементы, заданные аргументом
after(функция), before(функция) Добавляет результат, возвращаемый функцией, в окончание или начало содержимого каждого из элементов, содержащихся в объекте jQuery

Вызовы методов before() и after() следуют тем же шаблонам, что и другие методы вставки элементов в документ, с которыми вы уже познакомились. Пример использования обоих методов приведен ниже:

$(function() < var orchidElems = $("") .append("") .append("") .append(""); var lilyElems = $("") .append("") .append("") .append(""); $(orchidElems).add(lilyElems).css("border", "thick solid red"); $('#row1 div.dcell').after(orchidElems); $('#row2 div.dcell').before(lilyElems); >);

В этом сценарии мы создаем наборы элементов для орхидей и лилий, а затем вставляем их в документ с помощью методов before() и after() как сестринские элементы по отношению к каждому из элементов, принадлежащих классу dcell. Элементы, соответствующие орхидеям, вставляются как следующие сестринские элементы по отношению к каждому элементу в контейнере со значением id, равным row1, тогда как элементы, соответствующие лилиям, вставляются как предшествующие сестринские элементы по отношению к каждому элементу в контейнере со значением id, равным row2.

Вид страницы в окне браузера представлен на рисунке:

Использование методов before() и after() для создания сестринских элементов

Вставка сестринских элементов из объекта jQuery

Методы insertAfter() и insertBefore() вставляют элементы, содержащиеся в объекте jQuery, в качестве следующих или предшествующих сестринских элементов по отношению к элементам, переданным методу в качестве аргумента. Это та же функциональность, которую обеспечивают методы after() и before(), но отличающаяся тем, что объект jQuery и аргумент метода меняются ролями.

Пример использования обоих методов приведен ниже:

. orchidElems.insertAfter('#row1 div.dcell'); lilyElems.insertBefore('#row2 div.dcell'); 

Вставка сестринских элементов с использованием функции

Сестринские элементы можно вставлять динамически, передавая методам after() и before() функцию в качестве аргумента. Пример динамической генерации сестринских элементов приведен ниже:

$(function() < $('#row1 div.dcell').after(function(index, html) < if (index == 0) < return $("") .append("") .append("") .append("") .css("border", "thick solid red"); > else if (index == 1) < return $("") .append("") .append("") .append("") .css("border", "thick solid red"); > >); >);

В этом сценарии сестринские элементы генерируются для тех элементов, для которых передаваемый функции аргумент index принимает значение 0 или 1. Страница в окне браузера показана на рисунке:

Размещение двух блоков 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, расположенных рядом друг с другом.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *