Question

我需要在不触摸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，但是实际代码涉及更多的元素和渲染。如何仅使用CSS删除HTML嵌套？

Answer 1

这不是我想出的，但我相信这就是您要寻找的。将此.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%);
}

Answer 2

您可以将右侧的列设置为

float:left

然后您可以按需使用边距和填充来操纵它

将元素移到CSS网格中的列之外

2 个答案: