Как правильно такое верстать?

Question

[Александр Осадчий]

Здравствуйте!

Подскажите пожалуйста, как правильно верстать подобные секции - одна сторона по контейнеру выровняна (правая), а левая - впритык к экрану


Вот набросок:

Comments

[Ankhena]

section .content .images .item

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

Подскажите пожалуйста, как правильно верстать подобные секции - одна сторона по контейнеру выровняна (правая), а левая - впритык к экрану

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

[RAX7]

Как сверстать блок, чтобы div выходил за родителя и дотягивался до краев браузера?

[Александр Осадчий]

Всем большое спасибо за ответы!

Ankhena, разрешите поинтересоваться, почему вложенность - это плохо?
section .content .images .item

А как-же компиляторы SASS\LESS? - они же так и компилируют

[Ankhena]

Александр Осадчий,

разрешите поинтересоваться, почему вложенность - это плохо?

Потому что браузер должен найти сначала каждый .item на странице, затем проверить, а есть ли у него родитель .images, потом проверить есть ли у всех найденных родитель .content, а затем лежит ли вся эта гусеница внутри section.
Т.е. ваша запись подразумевает, что есть какие-то другие .item, лежащие в других родителях и имеющие другие свойства.
Почитайте https://habr.com/ru/post/445292/ и далее.
Это первая часть.
А во вторых, когда в адаптивном сайте вам на какой-то ширине нужно будет переопределить какое-то свойство, то придется писать селектор с таким же или с большим весом.
Будет недостаточно написать просто

@media () {
.item {другой цвет}
}

https://canonium.com/articles/css-understanding-we...
css.yoksel.ru/specifity

А как-же компиляторы SASS\LESS? - они же так и компилируют

Вас никто не заставляет писать их как вложенные.

[theuser]

grid жи есть

Answer 1

[Арсений Матыцин]

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

Answer 2

[Антон Литвиненко]

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

.about-us-wrapper {
	margin-right: calc(50% - 1140px/2);
	padding-left: 15px;
	padding-right: 15px;
}

Answer 3

[yarnstart]

Используя css calc могут возникнуть проблемы на некоторых девайсах из-за ширины скролл бара, я для подобного использовал js

Answer 4

[Ivan Sedov]

Можно воспользоваться margin-left: calc(50% - 50vw);, но на некоторых девайсах может появиться горизонтальный скролл, который фиксится с помощью overflow-x: hidden;

Answer 5

[Екатерина Медведева]

Создаём 2 блока в половину ширины экрана и во второй заворачиваем блок в половину ширины контейнера.