2

我有 CSS 网格来生成两列布局。但问题是它不是每列中的顶部对齐内容。

例如，在第二列中，最后一个元素应该与另一个第二列元素顶部对齐，但要向上对齐。

body>div {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  /* https://codepen.io/maddesigns/pen/oZGWRN */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}

body>div>div:nth-of-type(1) {
  height: 300px;
}

body>div>div:nth-of-type(2) {
  height: 100px;
}

body>div>div:nth-of-type(3) {
  height: 200px;
}
<div style="">
  <div style="background:red">
    1
  </div>
  <div style="background:green;">
    2
  </div>
  <div style="background:yellow">
    3
  </div>
  <div style="background:pink">
    4
  </div>
</div>

我不能将 flex 用于此布局，因为我想在不定义容器高度的情况下实现此布局。column-count:2 如果不定义容器高度就可以工作，但是我不能使用 div 重新排序。

所以我使用 CSS 网格，因为 div 重新排序仍然可用（例如/即order:–1;效果很好），它会自动划分要放入两列中的每一列的内容。

4

2 回答 2

1

网格的行为完全符合预期，就像这样保持秩序和对称。我可以建议并排使用 2 个网格来实现您正在寻找的内容。这是我为证明这一点而制作的一个示例：

.left{
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  width: 50%;
  float: left;
  /* https://codepen.io/maddesigns/pen/oZGWRN */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}

.right{
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
   width: 50%;
  /* https://codepen.io/maddesigns/pen/oZGWRN */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}

.left>div:nth-of-type(1) {
  height: 300px;
}

.left>div:nth-of-type(2) {
  height: 100px;
}

.right>div:nth-of-type(1) {
  height: 200px;
}

.right>div:nth-of-type(2) {
  height: 50px;
}
<div class="left" style="">
  <div style="background:red">
    1
  </div>
  <div style="background:green;">
    2
  </div>
</div>
  
<div class="right">
  <div style="background:yellow">
    3
  </div>
  <div style="background:pink">
    4
  </div>
</div>

于 2020-12-07T18:24:43.107 回答
0

事实上，在具有自动缩小差距的 CSS 技术出现之前，CSS 通常没有解决方案。像这样的事情可能需要重排文档，所以我不确定它会有多大的用处或效率。

来源：https ://stackoverflow.com/a/45200955/1625909

于 2020-12-08T19:47:47.983 回答