如何在CSS中布局？[关闭]

evrscar2 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(144)

**已关闭。**此问题需要debugging details。目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答问题。
昨天就关门了。
这篇文章是在3小时前编辑并提交审查的。
Improve this question的

的数据
我尝试使用CSS网格与2列，但框C将结束在下面的B像这样

的
有什么建议吗？

编辑（已解决）

其解决方法是：

min-content网格的第一行高度
使用order属性重新排序子项目
框B具有2行跨距
在框C上设置色谱柱起点

盒子A、B、C可以是任意高度

.container {
  display: grid;  
}
.box-a {
  height: 500px
}
.box-b {
  height: 600px;
}
.box-c {
  height: 200px;
}
@media(min-width: 1024px) {
  .container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: min-content 1fr;
  }
  .box-a {
    order: 2;
  }
  .box-b {
    order: 1;
    grid-row: span 2 / span 2;
  }
  .box-c {
    order: 3;
    grid-column-start: 2;
  }
}

字符串
在此演示：https://codepen.io/linus-ang-the-sans/pen/jOJrMKY

css

来源：https://stackoverflow.com/questions/77762380/how-would-you-layout-this-in-css

1条答案

按热度按时间

u0njafvf1#

您可以使用媒体查询来实现这一点：在这个例子中，如果设备的宽度超过768像素，它将显示移动的视图，否则桌面一个。

.row-flex {
  display: flex;
}
.flex {
  display: flex;
  flex-direction: column;
  width: calc(50% - 6px);
  gap: 12px;
  padding: 4px;
  box-sizing: border-box;
  flex-wrap: wrap;
  color: white;
}
.a {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  color: white;
}
.b {
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  color: white;
}
.b-mobile {
  display: none;
}
.c {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
}
@media only screen and (max-width: 768px) {
  .flex {
    min-width: 100%;
  }
  .flex:first-of-type {
    display: none;
  }
  .b {
    display: none;
  }
  .b-mobile {
    display: flex;
  }
}

个字符

展开查看全部

赞(0）回复(0）举报 2024-01-09

我来回答

如何在CSS中布局？[关闭]

编辑（已解决）

1条答案

相关问题

热门标签

最新问答