相关疑难解决方法(0)

在CSS-Grid中创建叠加层

我试图在CSS3网格中创建一个叠加层,但我似乎无法弄清楚如何实现它.我在网上搜索过但没有找到任何帮助.我希望实现如下所示:

在此输入图像描述

body {
  margin: 0;
  padding: 0;
}

.wrapper {
		display: grid;
		grid-template-rows: 1f;
    width: 100vw;
    height: 100vh; 
    grid-template-areas:
      "a"
      "b"
      "c";
	}

.box {
  background-color: #444;
  color: #fff;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}
Run Code Online (Sandbox Code Playgroud)
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是一个指向codepen的链接:https://codepen.io/anon/pen/PROVeY

编辑:

如何在CSS3网格布局中将div和左侧和右侧的div叠加在它后面的较大div上 在此输入图像描述

 body {
      margin: 0;
      padding: 0;
    }

    .wrapper {
            display: grid;
            grid-template-rows: 1f;
        width: 100vw;
        height: 100vh; 
        grid-template-areas: …
Run Code Online (Sandbox Code Playgroud)

html css css3 css-grid

5
推荐指数
1
解决办法
2266
查看次数

标签 统计

css ×1

css-grid ×1

css3 ×1

html ×1