我需要我的页面看起来像 this但是,尽管我付出了努力,但我还是无法让任何东西发挥作用。
这是我目前拥有的:
.1 {
padding: 10px;
position: absolute;
left: 0px;
width: 50%;
.2 {
padding: 10px;
position: absolute;
left: 0px;
width: 50%;
.3 {
padding: 10px;
position: absolute;
right: 0px;
width: 50%;
最佳答案
你可以使用 CSS Grid 布局来做这样的布局
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.layout{
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 3fr 3fr;
grid-template-rows: 200px 200px 100px 500px;
grid-template-areas:
"m d1 d3"
"m d2 d3"
"m . d3"
"m d4 d4";
}
.menu{
grid-area: m;
background: rgb(46, 139, 87);
}
.div1{
grid-area: d1;
border: 1px solid black;
}
.div2{
grid-area: d2;
border: 1px solid black;
}
.div3{
grid-area: d3;
border: 1px solid black;
}
.div4{
grid-gap: 0px;
grid-area: d4;
background: rgb(245, 95, 68);
}
<div class="layout">
<div class="menu">Menu</div>
<div class="div1">div_1</div>
<div class="div2">div_2</div>
<div class="div3">div_3</div>
<div class="div4">div_4</div>
</div>
关于html - 需要创建这个 HTML/CSS 网格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50432241/