.container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100vh; } .sidebar { background-color: #f0f0f0; } .boxes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .box { flex-grow: 1; /* 平分宽度 */ background-color: #ccc; margin-bottom: 10px; } .box:nth-child(n+3) { border-radius: 10px; margin-top: 10px; margin-left: 20px; } <div class="container"> <div class="sidebar"> </div> <div class="boxes"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> <div class="boxSon"></div> <div class="boxSon"></div> <div class="boxSon"></div> </div> <div class="box"></div> </div> </div>补全代码将右侧第四个盒子分割为三个子盒子 要求子盒子高度等于父盒子,宽度将父盒子不均等分,且三个子盒子有一定间距
时间: 2023-11-22 19:53:17 浏览: 113
grid-cheatsheet:CSS网格备忘单
可以将右侧第四个盒子设置为 display: flex,并在其中嵌套三个子盒子,然后给父盒子设置 margin-left: 20px,再给子盒子设置 flex-grow: 1 和 margin-right: 20px 即可实现要求。
修改后的代码如下:
```
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100vh;
}
.sidebar {
background-color: #f0f0f0;
}
.boxes {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.box {
flex-grow: 1;
background-color: #ccc;
margin-bottom: 10px;
}
.box:nth-child(n+3) {
border-radius: 10px;
margin-top: 10px;
margin-left: 20px;
}
.box:nth-child(4) {
display: flex;
margin-left: 20px;
}
.boxSon {
flex-grow: 1;
background-color: #ccc;
margin-right: 20px;
}
.boxSon:last-child {
margin-right: 0;
}
```
HTML代码:
```
<div class="container">
<div class="sidebar"></div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">
<div class="boxSon"></div>
<div class="boxSon"></div>
<div class="boxSon"></div>
</div>
<div class="box"></div>
</div>
</div>
```
阅读全文