Переместить элементы за пределы столбца в сетке CSS - PullRequest
Новая
       12

Переместить элементы за пределы столбца в сетке CSS

0 голосов
/ 08 июля 2019

Мне нужно выделить элементы внутри правого столбца, не касаясь 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?

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Это не то, что я придумал, но это то, что вы ищете, я верю.Добавьте этот класс .full-bleed к элементу с классом .additional-info, и он будет охватывать всю страницу.

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

В этом случае нет необходимости в 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%);
}
0 голосов
/ 08 июля 2019

Вы можете установить столбец вправо как 

float:left

и затем вы можете манипулировать им по своему усмотрению с полем и отступом

...