代码之家 › 专栏 › 技术社区 › zzzzBov

是否可以指定内联文本流入哪个网格区域?

css-grid layout css

0

zzzzBov · 技术社区 · 7 年前

如果我有一个包含子节点的父节点。

我可以在父级上指定网格布局,并选择 grid-area 子节点将在中渲染:

.parent {
  background-color: lightgrey;
  display: grid;
  grid:
    ".    .   .   ." 1rem
    ".    a   .   ." 1fr
    ".    .   b   ." 1fr
    ".    .   .   ." 1rem
    /1rem 1fr 1fr 1rem;
}

.a {
  grid-area: a;
}
.b {
  grid-area: b;
}

<div class="parent">
  <div class="a">lorem ipsum dolor sit amet</div>
  <div class="b">lorem ipsum dolor sit amet</div>
</div>

如果有一个文本节点而不是一个子节点,是否可以指定 网格区域 文本节点流入?

.parent {
  background-color: lightgrey;
  display: grid;
  grid:
    ".    .   .   ." 1rem
    ".    a   .   ." 1fr
    ".    .   b   ." 1fr
    ".    .   .   ." 1rem
    /1rem 1fr 1fr 1rem;
}

.a {
  grid-area: a;
}

<div class="parent">
  <div class="a">lorem ipsum dolor sit amet</div>
  
  <!-- can this text be made to flow into grid-area b? -->
  lorem ipsum dolor sit amet
</div>

1 回复 | 直到 7 年前

1

BoltClock 7 年前

否,因为文本节点是作为匿名网格项布局的,所以您无法控制匿名网格项的布局方式。

(您可能可以通过操纵周围的非匿名网格项来影响其布局,但很明显,这将取决于您的实际网格设置。您不太可能让匿名网格项占据所有特定网格区域。)