Как сделать два div рядом
Блог Vaden Pro
Способы размещения блоков горизонтально
Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.
Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.
Из чего выбрать или методы
Существует несколько способов расположения структурных элементов в ряд в горизонтальной плоскости. Наиболее полезными, с точки зрения практического применения, являются:
Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.
«Для рывка» или немного теории
Все структурные элементы HTML можно условно разделить на:
Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.
Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div.
Наглядный пример встроенных и блочных структур приведен ниже:
Метод «Float»
Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.
Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float.
CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.
Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.
Для примера, создадим четыре блока, которые нужно разместить в ряд:
И внешнюю таблицу стилей с следующим содержимым:
В результате получаем четыре блока, расположенные в горизонтальный ряд и выровненные по левому краю родительского блока:
Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:
Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:
В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?
Алгоритм действий следующий.
В результате получаем такую картину:
Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.
Метод «Inline-block»
Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?
Встречайте, гвоздь программы – свойство display: inline-block.
display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.
Блочно-строчный элемент имеет следующие свойства:
Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.
В результате получаем такую менюшку:
Как видим, получилось кривовато. Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):
Теперь наша навигационная панель выровнялась по верхней линии:
Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр.
Результатом рендеринга такого кода будет следующая картина:
Есть несколько способов убрать зазоры:
Результатом применения любого из выше перечисленных приемов будет следующая структура:
Метод «Table»
Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.
Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.
Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:
Расположение div по центру и другие тонкости позиционирования
Преимущества верстки с помощью тега
Существует два основных типа построения структуры сайта:
Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.
Тем не менее, табличную верстку следует использовать для структуризации отображения данных на странице. Классическим примером ее применения является отображение таблиц.
Блочное построение на основе тегов
Средства позиционирования
В блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение
Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:
Центрирование слоев
В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам ( margin: 0 auto ):
После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:
Как из слоя сделать ссылку
Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:
Скрытие и отображение блочных элементов
Блочные элементы предоставляют больше возможностей для расширения функционала интерфейса, чем устаревшая табличная верстка. Часто бывает, что дизайн сайта является уникальным и узнаваемым. Но за такой эксклюзив приходиться платить нехваткой свободного места.
Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы « впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!
Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:
Синтаксис display :
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Как видите, данное свойство может принимать множество значений. Поэтому является очень полезным и может использоваться для позиционирования элементов. В одном из предыдущих примеров с помощью одного из его значений ( inline-block ) мы реализовали выравнивание div внутри div по центру.
Для скрытия и показа слоя мы использовали два значения свойства display :
Мы с вами рассмотрели все основные слои настоящего сайта. Надеемся, что полученные знания позволят вам « испечь » по-настоящему вкусный ресурс.
Как сделать с помощью css блоки в линию?
Дата публикации: 2016-10-11
От автора: я приветствую вас. Необходимость представить несколько блоков на веб-странице в одну линию — очень частая задача, которая возникает перед верстальщиками. Она возникает при верстке практически каждого шаблона, поэтому всем нам в любом случае нужно знать и применять основные способы изменения поведения блоков.
Прежде чем мы посмотрим самые распространенные приемы, хотел бы вспомнить немного теории. Элементы веб-страницы делятся на блочные и строчные. И разница между ними очень проста — строчные могут располагаться в одну строку, а блочные — нет. Конечно, на этом различия не заканчиваются, но это основное отличие. Уже у блоков могут быть отступы сверху и снизу (у строчных — нет), а также к ним можно применять больше свойств.
Основные способы выстроить в css блоки в ряд
Есть мы не будем ничего усложнять, есть 3 основных способа:
Преобразовать блоки в строчные элементы. При этом блочные свойства теряются, поэтому этот вариант практически никогда не используется
Сделать нужные элементы блочно-строчными. Это специальный тип, при котором элемент сохраняет свои свойства, но в то же время позволяет другим блокам расположиться рядом.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Сделать элементы плавающими с помощью свойства float.
На этих вариантах остановимся. Флексбокс, табличное отображение и другие моменты рассматривать не будем. Итак, пускай у нас есть 3 подзаголовка.
Естественно, все css-свойства нужно прописывать в отдельном файле (style.css), который нужно подключить к html-документу. В этот файл я запишу минимальный стиль, чтобы просто было видно наши подзаголовки.
Вот они на странице:
Есть они ведут себя как блоки. Кадый располагается на своей строке, между ними есть отступы. При желании также вы можете задать какие-угодно внутренние отступы и вообще сделать что угодно.
Преобразуем в строки и сразу добавим внутренние отступы. Для этого селектору h3 нужно добавить такие свойства:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как видите, отступы применились не совсем корректно, это как раз потому, что мы имеем дело со строками. Если изменить отображение на блочно-строчное, отступы добавятся корректно. Для этого всего лишь меняем значение свойства:
Есть 2 основные проблемы, которые возникают при использовании этого приема. Первая — это минимальный отступ. Образуется он из-за того, что в коде между блоками есть один пробел, который и образует этот отступ. Если эта проблема нуждается в решении, есть 2 основных варианта:
В html расположить код нужных блоков в одну линию без пробелов
Вторая проблема — при разной высоте элементов могут возникать проблемы с отображением. В общем, наилучший вариант — плавающие блоки. Вместо display: inline-block пишем вот что:
И все наши заголовки третьего уровня теперь будут прижиматься к левому краю. Соответственно, также можно прижать их и к левому. При использовании этого приема вышеописанных проблем не возникает изначально.
Единственное, за чем вы должны следить в таком случае — отмена обтекания. Следующему блоку после плавающих нужно поставить свойство clear:both, чтобы он не пытался обтекать эти блоки, а расположился ниже, как и положено.
Блоки в линию с использованием фреймворка
Сразу скажу, что если вы собираетесь использовать любой нормальный css-фреймворк (например, Bootstrap) то там все еще гораздо проще. Весь css-код, отвечающий за расстановку элементов, уже написан и вам останется лишь задан правильные классы. Для этого достаточно изучить систему сетки, и вы сможете делать многоколоночные адаптивные шаблоны без особых трудностей. По крайней мере, это будет значительно проще, чем при написании css с нуля.
Еще одна проблема написания кода с нуля возникает как раз когда вам нужен адаптивный дизайн. Конечно, его можно реализовать самостоятельно, владея медиа-запросами, но это будет намного сложнее, если у вас сложный шаблон.
Например, когда у вас на больших экранах должно быть 4 колонки, на средних — 3, а на мобильных телефонах — 2. С помощью таких фреймворков, как Bootstrap, а точнее с помощью его сетки, реализовать подобное — дело буквально нескольких минут.
Плавно переводя тему на фреймворк Bootstrap, в очередной раз отмечу, что если перед вами стоит задача сверстать сложный адаптивный шаблон, то просто грех не воспользоваться сеткой. Для этого даже не обязательно подключать полную версию фреймворка – его можно кастомизировать и остановить там только то, что действительно вам нужно.
Научиться работать с фреймворком вы сможете с помощью нашего платного курса. Там объясняется и теория, но самое главное – есть практика. Вы сверстаете 3 адаптивных шаблона и получите отличный опыт, который позволит верстать сайты на заказ или для себя. А если вы хотите бесплатно ознакомиться с преимуществами и возможностями фреймворка, предлагаю вам просмотреть нашу серию статей по Bootstrap, а также бесплатный мини-курс по верстке простого макета. Желаю вам успехов в верстке и сайтостроении в целом.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Разделите Div на 2 столбца с помощью CSS
Я пытался разделить div на два столбца с помощью CSS, но мне еще не удалось заставить его работать. Моя основная структура такова:
Если я попытаюсь переместить правый и левый дивы в соответствующие позиции (правый и левый), он, похоже, игнорирует цвет фона содержимого div. И другой код, который я пробовал с разных сайтов, похоже, не может перевести в мою структуру.
Спасибо за любую помощь!
13 ответов
когда вы плаваете эти два divs, содержимое div сжимается до нулевой высоты. Просто добавьте
после #right div, но внутри содержимого div. Это заставит контент div окружить два внутренних, плавающих divs.
Это хорошо работает для меня. Я разделил экран на две половины: 20% и 80%:
другой способ сделать это, чтобы добавить overflow:hidden; к родительскому элементу плавающих элементов.
overflow: hidden заставит элемент расти, чтобы вписаться в плавающие элементы.
таким образом, все это можно сделать в css, а не добавлять другой html-элемент.
самый гибкий способ сделать это:
Это действует точно так же, как добавление элемента к #content:
но без добавления элементов. :: after называется псевдо-элементом. Единственная причина, по которой это лучше, чем добавить overflow:hidden; to #content заключается в том, что вы можете иметь абсолютное переполнение дочерних элементов и все еще быть видимым. Также это позволит коробка-тени все еще были видны.
вот что работает в простых случаях:
Если вы поместите некоторый контент, вы увидите, что он работает:
сделать детей divs inline-block и они будут располагаться бок о бок:
на это лучше всего ответить здесь вопрос 211383
в наши дни любой уважающий себя человек должен использовать заявленный «микро-clearfix» подход очистки поплавков.
поплавки не влияют на поток. То, что я склонен делать, это добавить
в конце ‘wrapping div’ (в данном случае содержимое). Я могу обосновать это на семантической основе, сказав, что такой абзац может потребоваться. Другой подход-использовать clearfix CSS:
обман с комментариями для кросс-браузерной совместимости.
установить ширину % для каждого из дочерних DIVs.
*в Safari вам может потребоваться установить 49%, чтобы он работал.
разделить деление на два столбца очень легко, просто укажите ширину вашего столбца лучше, если вы поместите это (например, ширина:50%) и установите float:left для левого столбца и float:right для правого столбца.
ни один из ответов не ответил на исходный вопрос.
вопрос в том, как разделить div на 2 столбца с помощью css.
все вышеперечисленные ответы фактически вставляют 2 divs в один div, чтобы имитировать 2 столбца. Это плохая идея, потому что вы не сможете передавать контент в 2 столбца любым динамическим способом.
поэтому вместо вышеизложенного используйте один div, который определен как содержащий 2 столбца с использованием CSS как следует.
назначьте выше как класс div, и он фактически будет передавать свое содержимое в 2 столбца. Вы можете пойти дальше и определить промежутки между полями. В зависимости от содержимого div вам может потребоваться возиться со значениями разрыва слов, чтобы ваш контент не разрезался между столбцами.
CSS два divs рядом друг с другом
Я хочу поставить два
Вы можете использовать flexbox для размещения своих элементов:
Это в основном просто очистка поверхности flexbox. Flexbox может делать довольно удивительные вещи.
Для более старой поддержки браузера вы можете использовать свойства CSS float и width, чтобы решить эту проблему.
Обратите внимание, что использование атрибута inline style использовалось только для краткости этого примера, конечно, эти используемые были перемещены во внешний файл CSS.
РЕДАКТИРОВАТЬ: Как было предложено Dom, проблема обертывания, конечно, может быть решена с запасом. Глупый я.
Изменить: Хм, интересно. В окне предварительного просмотра отображаются правильно отформатированные div, но обработанный элемент сообщения не работает. Извините, вам придется попробовать это для себя.
Сегодня я столкнулся с этой проблемой. Основываясь на вышеизложенных решениях, это сработало для меня:
Просто сделайте, чтобы родительский div разделил всю ширину и поместил div, содержащиеся внутри.
Это будет работать нормально, пока вы установите clear: both для элемента, который разделяет этот два блока столбца.
UPDATE
Если вам нужно разместить элементы в строке, вы можете использовать Flex Layout. Здесь вы найдете еще один руководство по Flex. Это отличный инструмент для CSS, и хотя он не совместим со 100%, каждый день его поддержка
Я столкнулся с той же проблемой, и версия Мохита работает. Если вы хотите сохранить свой левый порядок в html, попробуйте это. В моем случае левый div настраивает размер, правый div остается на ширине 260 пикселей.
HTML
Трюк состоит в том, чтобы использовать правое заполнение в главном окне, но снова использовать это пространство, снова разместив правое поле с правым краем.
Как все отметили, вы сделаете это, установив float:right; в контент RHS и отрицательный запас на LHS.
Однако.. если вы не используете float: left; в LHS (как это делает Mohit), вы получите эффект степпинга, потому что LHS div по-прежнему будет потреблять пространство margin’d в макете.
Однако плагин LHS сократит содержимое содержимого, поэтому вам нужно будет вставить определенный дочерний номер ширины, если это неприемлемо, и в этот момент вы также можете определить ширину родительского элемента.
Однако, как указывает Дэвид, вы можете изменить порядок считывания разметки, чтобы избежать требования по плаванию LHS, но это имеет читаемость и, возможно, проблемы доступности.
Однако.. эта проблема может быть решена с поплавками с некоторой дополнительной разметкой
Учитывая все обстоятельства, я думаю, что большинство из нас желает, чтобы была неглавная ширина: оставаясь в CSS3.