<分区>
重复部分
我正在尝试为 React 应用程序中的某个部分构建特定布局,布局类似于下图,忽略右边的行。 这是我的 HTML, 盒子暂时是空的,稍后再回来..
const projects = () => {
return (
<section className="projects">
<div className="container fcontainer">
<div className="fcol fcol--1">
<div className="box-1"></div>
<div className="box-2"></div>
</div>
<div className="fcol fcol--2">
<div className="box-1"></div>
<div className="box-1"></div>
<div className="box-1"></div>
</div>
<div className="fcol fcol--3">
<div className="box-1"></div>
<div className="box-2"></div>
</div>
</div>
</section>
)
}
.fcol {
color: #333;
margin: 1rem;
text-align: center;
font-size: 3rem;
display: flex;
flex-direction: column;
height: 60vh;
flex-grow: 4;
&--1 {
.box-1{
background-color: lightblue;
flex-grow: 1;
margin-bottom: 2rem;
}
.box-2{
background-color: lightgreen;
flex-grow: 2;
}
}
&--2 {
.box-1{
background-color: lightblue;
flex-grow: 1;
justify-content: space-between;
&:not(:last-child){
margin-bottom: 2rem;
}
}
}
&--3 {
.box-1{
background-color: lightblue;
flex-grow: 3;
margin-bottom: 2rem;
}
.box-2{
background-color: lightgreen;
flex-grow: 2;
}
}
}
这是一个codepen如果您有兴趣,可以为你们编辑和解决问题,如果您有更好的方法,也可以随意更改 HTML 和 scss 整个结构。
非重复部分
我有点卡在用图像填充每个框,因为图像总是溢出框外,即使我手动将它的 height
和 width
设置为 100%
,如果我添加了 Bootstrap 类 img-fluid
,它也不起作用。
在我的 React 应用程序中导入和使用 .scss 文件中的图像时发生另一个错误,请在 link 中查看, 就这样,非常感谢您的宝贵时间