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

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

css-grid layout css

zzzzBov · 技术社区 · 6 年前

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

我可以在父级上指定网格布局,并选择 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 回复 | 直到 6 年前

BoltClock Alan H. 6 年前

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

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

推荐文章

Chris Sherlock · 如何将图像调整为css网格

2 年前

Tagc · 是否可以使用flexbox同时执行“行反转”和“列反转”之类的操作?

6 年前

Tv's Very Own · 网格行间距未应用百分比

6 年前

arw89 · CSS网格中的纯CSS箭头div

6 年前

Arie B · 使用html节标记时在css网格中提供相同的css属性

6 年前

ctaylordev94 · CSS网格行属性由Less[重复]错误编译

6 年前

techguy2000 · css网格单元格内容溢出不工作

6 年前

techno geek · css网格布局的水平滚动

6 年前

dkrasniy · Flexbox换行仅第一列,带溢出滚动

6 年前

WoJ · 如何使用Vue构建动态CSS网格?

6 年前