Переместить элементы за пределы столбца в сетке CSS
Мне нужно было бы вывести элементы внутри правого столбца, не касаясь HTML. В настоящее время наиболее реалистичным вариантом кажется макет сетки CSS. Возможно ли, если мой HTML выглядит так?
<div class = "parent">
<div class = "column1 image"></div>
<div class = "column2">
<div class = "description"></div>
<div class = "additional-info"></div>
</div>
</div>
Цель состоит в том, чтобы дополнительная информация охватывала всю ширину страницы, а не 50% столбца, для которого она предназначена. Что-то вроде следующего:
.parent {
display: inline-grid !important;
grid-template-columns: 50% 50%;
grid-gap: 1em;
grid-template-areas: "image description"
"additional additional"
.image {
grid-area: image;
}
.description {
grid-area: description;
}
.additional-info {
grid-area: additional;
}
Проблема здесь в том, что мои элементы сетки не находятся на одном уровне.
Я бы исправил HTML, но фактический код включает в себя гораздо больше элементов и рендеринга. Как я могу удалить вложенность HTML, используя только CSS?
Попробуйте display: grid; вместо display: inline-grid !important; и вам не нужно использовать grid-template-columns: 50% 50%;
Ответы 2
Вы можете установить столбец справа как
float:left
а затем вы можете манипулировать им по своему усмотрению с помощью полей и отступов
Это не то, что я придумал, но это то, что вы ищете, я верю.
Добавьте этот класс .full-bleed к элементу с классом .additional-info, и он будет охватывать всю страницу.
Он будет занимать всю ширину окна просмотра и центрировать его с помощью преобразования и перевода. В качестве альтернативы вы можете использовать отрицательные поля. Он будет экранировать любой контейнер, поэтому даже если ваш родительский элемент вложен, а не имеет полную ширину, это будет.
В этом случае нет необходимости в сетке CSS.
// Escape any container, set this element to be 100vw and aligned to viewport without taking it out of normal document flow.
.full-bleed {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
связанные: stackoverflow.com/a/54535961/8620333