Как разделить блоки в css

Separating two divs with CSS

Say I have two divs A and B, which are currently aligned side by side. How can I get A to be separated from B by 50px, while still letting A to take up 70% of the remaining space and B the remaining 30%?

EDIT: Accepted the answer a little early before I actually tried. Whoops.

Now separated, but now with the second one on a second line?

5 Answers 5

Try this out if it solves your problem.

just set the margin-left or padding-left of div B

I believe your selected answer will not work:

edit:
Sorry, the above example was not correct at first. Now it is.
/edit

As you can see, div #b will move under div #a because margin-left (or padding-left ) will be added to the 30% . And because we’re mixing percentage with pixel values here, we will not be able to define values that will guarantee to always add up to exactly 100%.

You’ll need to use a wrapper for div #b which will have 30% width, and not define a width for div #b , but define margin-left . Because a div is a block element it will automatically fill the remaining space inside the wrapper div:

This way you will circumvent the CSS < 3 box-model features which oddly enough was defined such that defining a dimension (width / height) will NOT subtract margins and/or paddings and/or border-width.
I believe CSS 3’s box-model will provide more flexible options here. But, admittedly, I’m not sure yet about cross-browser support for these new features.

Разделить блок надвое, css?

Добрый день! Имею следующий вопрос.
Нужно разделить блок надвое, не было бы проблемой если бы это был только бэкграунд, но в блоке есть еще кнопки и другие элементы, то есть, вместе со всеми элементами нужно разделить блок или целую страницу на двое. Желательно только css/sass. Нужно для css анимации
Пример
Буду благодарен за любые варианты, идеи!

• Вопрос задан более трёх лет назад
• 6384 просмотра

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

Хотя скорее всего у вас в css есть разметка , просто разделить контейнер на six six

Как разделить блок на две части css

Направление row (строка, ряд) для локали LTR

Направление row-reverse (реверсивная строка) для локали LTR

Направление column (столбец, колонка)

Направление column-reverse (реверсивный столбец)

Свойство justify-content

• flex-start (значение по умолчанию) — flex-элементы прижимаются к началу главной оси.
• flex-end — flex-элементы прижимаются к концу главной оси.
• center — flex-элементы центрируются по главной оси.
• space-between — первый flex-элемент находится в начале главной оси, последний flex-элемент — в ее конце, а все остальные flex-элементы равномерно распределяются в пределах оставшегося пространства.
• space-around — все flex-элементы равномерно распределяются на главной оси, при этом свободное пространство поровну делится между ними.

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

Свойство align-items

• stretch (значение по умолчанию) — flex-элементы растягиваются вдоль поперечной оси (если при этом указаны свойства min-width / max-width , они принимаются во внимание).
• flex-start — flex-элементы прижимаются к началу поперечной оси.
• flex-end — flex-элементы прижимаются к концу поперечной оси.
• center — flex-элементы центрируются по поперечной оси.
• baseline — flex-элементы выравниваются по своим базовым линиям.

align-items: stretch

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

Свойство flex-wrap

• nowrap (значение по умолчанию) — flex-элементы размещаются в одной линии, слева направо (либо справа налево для локации RTL).
• wrap — flex-элементы выстраиваются горизонтально в несколько рядов (при условии, что они не помещаются в один ряд). Направление элементов — слева направо (или справа налево для RTL).
• wrap-reverse — принцип действия идентичен предыдущему свойству, с той лишь разницей, что расположение flex-элементов происходит в реверсном порядке.

flex-wrap: nowrap

flex-wrap: wrap

flex-wrap: wrap-reverse

Свойство flex-flow

Свойство align-content

• stretch (значение по умолчанию) — ряд flex-элементов растягивается по вертикали, пока не упрется в следующий ряд (если при этом указаны свойства min-width / max-width , они принимаются во внимание).
• flex-start — ряды flex-элементов прижимаются к началу flex-контейнера.
• flex-end — ряды flex-элементов прижимаются к концу flex-контейнера.
• center — ряды flex-элементов вертикально центрируются во flex-контейнере.
• space-between — первый ряд flex-элементов находится в начале flex-контейнера, последний ряд flex-элементов — в конце, а все остальные ряды равномерно распределяются в пределах оставшегося пространства.
• space-around — все ряды flex-элементов равномерно распределяются в вертикальном пространстве flex-контейнера, при этом свободное пространство поровну делится между ними.

align-content: stretch

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

Как разделить блок div на две части?

Здравствуйте! Подскажите пожалуйста, как мне разделить блок на две части, но при этом, чтобы они были в общем блоке? 1-я часть картика + описание черным текстом, а 2-я часть должна быть только с описанием зеленого текста.

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

Извините за то, что криво объяснил, по другому не знаю как объяснить =( Я приложил скриншот на котором нарисовал разделение. Но мне нужно чтобы самой полоски разделения в блоке не было видно. Нужно чтобы зеленый текст был за черной полосой , но при этом этой полосы не было видно — как-то так

Блочная модель

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота через height ; вокруг контента идут поля ( padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы ( border ) и завершают блок отступы ( margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.

Рис. 3.1. Свойства, формирующие блочный элемент

Для наглядности свойства блока можно представить в виде матрёшек (рис. 3.2). Любую маленькую матрёшку можно вставить в более крупную матрёшку, но никак не наоборот.

Рис. 3.2. Матрёшки

На деле ни одно из этих свойств не является обязательным, в том числе и контент, поэтому вы можете формировать любые блоки, содержащие комбинации свойств padding , border и margin или вообще обойтись без них.

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

Пример 3.1.Использование свойства padding

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 3.3. Поля вокруг текста

Значения полей не могут быть отрицательными.

Границы

Границы это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет. Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left , border-top , border-right и border-bottom , соответственно устанавливающих границу слева, сверху, справа и снизу. В примере 3.2 показано добавление линии слева от элемента.

Пример 3.2. Красная пунктирная линия

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 3.4. Линия возле текста

Расстояние от линии до текста регулируется значением padding .

Отступы

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

Для отступов характерны следующие особенности.

• Отступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока. Однако если фон установлен у родительского элемента, он будет заметен и на отступах.
• Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону. Так, если задано margin-left : -10px , это сдвинет блок на десять пикселов влево.
• Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой.
• Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.

В примере 3.3 показано схлопывание отступов и их прозрачность.

Пример 3.3. Использование отступов

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.5. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта схлопывания, при котором близлежащие отступы объединяются.

Рис. 3.5. Отступы в элементе

На рисунке хорошо видно, что цвет, задаваемый через свойство background , не выходит за пределы границы элемента и не оказывает влияние на отступы.

Ширина блока

Ширина блока это комплексная величина и складывается из нескольких значений свойств:

• width — ширина контента, т.е. содержимого блока;
• padding-left и padding-right — поле слева и справа от контента;
• border-left и border-right — толщина границы слева и справа;
• margin-left и margin-right — отступ слева и справа.

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

Рис. 3.6. Ширина блока

Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений полей, границ и отступов. Под доступной шириной в данном случае подразумевается ширина контента у родительского блока, а если родителя нет, то ширина контента браузера.

Допустим, для слоя написан следующий стиль.

Ширина блока согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Надо отметить, что блочная модель с формированием ширины несет в себе кучу неудобств. Постоянно приходится заниматься вычислениями, когда требуется задать определенную ширину блока. Также начинаются проблемы при сочетании разных единиц измерения, в частности, процентов и пикселов. Предположим, что ширина контента задана как 90%, если сюда приплюсовать поля и границы, заданные в пикселах, то нельзя вычислить суммарную ширину блока, поскольку проценты напрямую в пикселы не переводятся (в CSS3 так суммировать можно, только поддерживается эта возможность далеко не всеми браузерами). В итоге может получиться так, что общая ширина блока превысит ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки. Выходов из подобной ситуации два — поменять алгоритм блочной модели и воспользоваться вложенными слоями.

Алгоритм блочной модели

Как уже упоминалось, ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в режиме совместимости (иными словами, когда не указан доктайп) алгоритм меняется автоматически и ширина всего блока устанавливается равной width . Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing , которое нам и пригодится. При значении border-box ширина начинает включать поля и границы, но не отступы. Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в процентах и спокойно указывать border и padding , не боясь, что изменится ширина блока. К сожалению, с этим свойством связана небольшая проблема, как обычно относящаяся к браузерам — не все браузеры его понимают. Радует, что браузеры хотя бы поддерживают специфические для каждого браузера свойства. В табл. 3.1 приведена поддержка браузерами.

Табл. 3.1. Поддержка браузерами свойства box-sizing

Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства одновременно (пример 3.4).

Пример 3.4. Ширина блока

XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx

Данный пример будет работать во всех браузерах, указанных в табл. 3.1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding . Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.

Вложенные слои

Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдёт старый проверенный метод с вложением слоев. Идея простая — для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное — поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 3.5 показано использование вложенных слоев.

Пример 3.5. Вложенные слои

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 3.7. Ширина блока в процентах

Преимуществом вложенных слоев является использование отступов ( box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить добавление дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.

Высота блока

На высоту блока действуют те же правила, что и на ширину. А именно, высота складывается из значений высоты контента ( height ), полей ( padding ), границ ( border ) и отступов ( margin ). Если свойство height не указано, то оно считается как auto , в этом случае высота контента вычисляется автоматически на основе содержимого. На рис. 3.8 показаны свойства, дающие итоговую высоту, которая обозначена чёрной пунктирной линией.

Рис. 3.8. Высота блока

Вместе с тем, несмотря на схожесть принципов построения ширины и высоты, у них есть существенные различия. Это касается того случая, когда значение width и height не указано, тогда по умолчанию оно принимается как auto . Для ширины блока — это максимально доступная ширина контента, а для высоты блока — это высота контента. Также для ширины блока известна ширина родителя, даже если она не указана явно. Это позволяет устанавливать значение width в процентах. Использование же процентов для height ни к чему не приведёт, потому что высота родителя не вычисляется и её надо указывать. В примере 3.6 показано, как задать высоту блока в процентах.

Пример 3.6. Высота блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 3.9. Высота блока в процентах

Для тега <div> в примере родителем выступает тег <body> , поэтому для него устанавливаем значение height равным 100%. В то же время на <body> действуют те же правила, что и на <div> , поэтому величина в процентах будет вычисляться не от высоты страницы, а от высоты контента. Так что для родителя <body> , которым является тег <html> , также требуется поставить значение height равным 100%. Только в этом случае высота блока в процентах будет зависеть от высоты страницы.

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

С высотой связана ещё одна особенность — при превышении содержимого блока его размеров при заданной высоте, содержимое начинается отображаться поверх блока (рис. 3.10).

Рис. 3.10. Превышение размеров блока

Код, приводящий к подобному результату, приведен в примере 3.7.

Пример 3.7. Превышение размеров блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Чтобы избежать подобных неприятностей, высоту контента лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется к стилю добавить свойство overflow со значением auto или hidden . Результат у них разный, auto добавляет полосы прокрутки автоматически, когда они требуются (рис. 11а), hidden скрывает всё, что не помещается в заданные размеры (рис. 11б).

а. Значение auto

б. Значение hidden

Рис. 11. Использование свойства overflow

Если задать одновременно цвет фона и пунктирную границу блока, то становится заметно, что граница проходит внутри цветной области. Правда в разных браузерах наблюдается разночтение, в частности Internet Explorer до версии 7.0 включительно содержит ошибку, при которой фон выводится по внутреннему краю границы (рис. 12в). Начиная с версии 8.0 эта ошибка исправлена, и фон выводится по стандартам (рис. 12г). Браузеры Opera (рис. 12а), Firefox (12б), Safari и Chrome (рис. 12д) фон выводят правильно. Небольшие различия наблюдаются при отображении пунктирной рамки, но они не влияют на блочную модель.

д. Safari, Chrome

Рис. 12. Отображение фона в браузере

В примере 3.8 показано, как создать код для получения подобной границы.

Пример 3.8. Фон и граница

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

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

Не могу разбить блок <div> на две равных части для моего контента

Если вы программист или веб-разработчик, то, скорее всего, сталкивались с ситуацией, когда вам нужно было разделить блок <div> на две равные части для размещения контента. Эта задача может быть непростой, особенно для начинающих разработчиков. В этой статье я расскажу вам о нескольких методах, которые помогут вам достичь желаемого результата.

Прежде чем начать, давайте уточним, что именно вы хотите сделать. Разбить блок <div> на две равные части может иметь различные значения, в зависимости от вашего конкретного случая. Вот несколько различных вариантов, которые вы можете рассмотреть:

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

2. Разделить блок по вертикали: В этом случае блок будет разделен пополам по вертикали и контент будет размещен слева направо.

3. Разделить блок по диагонали: Этот вариант представляет собой более сложный сценарий, в котором блок разбивается на две равные части по диагонали. Контент может быть размещен, например, по одной стороне диагонали или вокруг нее.

Теперь, когда мы уточнили, на что вы хотите разделить блок <div>, давайте рассмотрим несколько подходов, которые вы можете использовать для достижения желаемого результата.

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

Для того чтобы разбить блок <div> на две равные части с использованием flexbox, вам нужно выполнить следующие шаги:

1. Оберните ваш контент в родительский элемент <div> с классом "container".
2. Примените к этому элементу следующие CSS-свойства:

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

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

1. Создайте родительский элемент

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

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

1. Создайте родительский элемент <div> с классом "container".
2. Примените к этому элементу следующие CSS-свойства:

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