Question

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

我可以在父级上指定网格布局，并选择将呈现子节点的grid-area：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果我有一个文本节点，而不是其中一个子节点，是否可以指定哪些grid-area文本节点流入？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

不，由于文本节点被布局为匿名网格项，因此您无法控制匿名网格项的布局方式。

（您可能会通过操纵周围的非匿名网格项来影响其布局，但显然这取决于您的实际网格设置，这很不可能。它不太可能您将能够拥有一个匿名网格项占据所有特定网格区域。）

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

1 个答案: