Как сделать два дива рядом

Как сделать с помощью 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

Источник

Html два div рядом

Очень часто при вёрстке сайта появляется необходимость прописать блоки div по горизонтали, или по-иному сделать блоки div в ряд.

Первый вариант блоки div по горизонтали.

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

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

Описание прописанных значений для DIV

Второй вариант: блоки div в один ряд.

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

Задача

Разместить рядом по горизонтали два блочных элемента фиксированной ширины.

Решение

Слой, создаваемый через тег

Пример 1. Слои заданной ширины

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Слои, располагающиеся по горизонтали с помощью float

Рис. 2. Сдвиг слоев при уменьшении окна браузера

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

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

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

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

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

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

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

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

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

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

Метод «Float»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ширина блоков должна быть фиксированной. Иначе получите что-то такое:

Метод «Inline-block»

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

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

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

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

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

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

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

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

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

Результатом рендеринга такого кода будет следующая картина:

Есть несколько способов убрать зазоры:

подобрать отрицательные значения margin:

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

Метод «Table»

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

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

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

Источник

CSS два дива рядом друг с другом

Я хочу поставить два

13 ответов

можно использовать flexbox чтобы выложить свои предметы:

это в основном просто выскабливание поверхности flexbox. Flexbox может делать довольно удивительные вещи.

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

Я не знаю, является ли это все еще текущей проблемой или нет, но я просто столкнулся с той же проблемой и использовал CSS display: inline-block; тег. Оберните их в div так, чтобы их можно было расположить соответствующим образом.

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

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

Edit: Хм, интересно. В окне предварительного просмотра правильно отформатированные divs, но отображаемый элемент post этого не делает. Тогда извини, тебе придется попробовать самому.

Я сегодня столкнулся с этой проблемой. Основываясь на решениях выше, это сработало для меня:

просто сделайте Родительский div span полную ширину и плавайте divs, содержащиеся внутри.

это будет работать нормально, пока вы установите clear: both для элемента, который разделяет этот блок двух столбцов.

обновление

Если вам нужно разместить элементы в ряд, вы можете использовать Гибкий Макет. Вот вам еще один Flex учебник. Это отличный инструмент CSS, и хотя он не совместим на 100%, каждый день его поддержка становится лучше. Это работает так:

и вы получаете здесь контейнер с общим размером 4 блоков, который поделитесь пространством со своими детьми в соотношении 1/4 и 3/4.

Я сделал пример в CodePen, который решает вашу проблему. Надеюсь, это поможет.

ОЧЕНЬ СТАРЫЙ

может быть, это просто ерунда, но вы пробовали со столом? Он не использует непосредственно CSS для позиционирования divs, но он отлично работает.

вы можете создать таблицу 1×2 и поставить ваш divs внутри, а затем форматирование таблицы с помощью CSS, чтобы поместить их, как вы хотите:

Примечание

я столкнулся с той же проблемой, и версия Mohits работает. Если вы хотите сохранить свой левый-правый порядок в html, просто попробуйте это. В моем случае левый div регулирует размер, правый div остается на ширине 260px.

HTML-код

в CSS

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

Как все отметили, вы сделаете это, установив float:right; о содержании RHS и отрицательном поле на LHS.

однако.. если вы не используете float: left; на LHS (как и Mohit), тогда вы получите эффект шага, потому что LHS div по-прежнему будет потреблять пространство margin’D в макете.

однако.. LHS float будет сжимать-обертывать содержимое, поэтому вам нужно будет вставить определенный childnode ширины, если это неприемлемо, и в этот момент Вы можете хорошо определили ширину на родителе.

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

однако.. эта проблема может быть решить с поплавками с дополнительной разметкой

учитывая все, я думаю, большинство из нас хотели бы, чтобы была не жадная ширина:оставаясь в CSS3.

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

вот как будет выглядеть ваша таблица стилей:

Я использую смесь float и overflow-x: hidden. Минимальный код, всегда работает.

перефразировать один из моих веб-сайтов, который делает что-то подобное:

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

Источник

Как сделать два дива рядом

Способов выравнивания блоков довольно много. Каждый выбирает для себя более привычный. Я опишу 5 способов, выбирайте наиболее подходящий.

/* эти стили на выравнивание не влияют */
width: 400px;
background-color:#CCC;
border: 1px solid #999;
padding: 20px;
>
Код HTML-смтраницы:

margin:5px 20% 10px 20%;

width:60%;
Код страницы аналогичен предыдущему способу.

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

Стили для этих блоков:

.dop-block <
position: relative;
float: right;
right: 50%;
>
.blk4 <
position: relative;
float: left;
left: 50%;

/* эти стили на выравнивание не влияют */
margin: 5px;
background-color:#CCC;
width:400px;
border: 1px solid #999;
padding: 20px;
>

Если блоков в странице не много, т.е. они помещаются в одну строку, то выравнивание для них работает:

.dop-block <
text-align: center;
>

.blk5 <
display: inline-block;

/* дополнительный стиль для вытавнивания текста внутри блока */

text-align:left;

/* эти стили на выравнивание блоков не влияют */
margin: 5px;
background-color:#CCC;
width:400px;
border: 1px solid #999;
padding: 20px;

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

Не все способы описаны. Если вы считаете, что есть еще более удобный способ, напишите.

Источник