gpt4 book ai didi

html - 未对齐的 CSS 布局 - 具有固定中心的 3 col 布局

转载 作者:太空宇宙 更新时间:2023-11-04 05:52:17 24 4
gpt4 key购买 nike

我是 CSS 的新手,我正在尝试创建一个 3 列布局。也应该有一个居中的页脚。页面的总高度应该填满当前的屏幕。宽度似乎不对。

目前,页脚在尺寸和位置上似乎都没有对齐。

I have attached the design I'm trying to build.感谢您的指点!

.container {
display: flex;
flex-direction: row;
width: 100vw;
height: 100vh;
}

body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}

.left {
background-color: gainsboro;
width: 20%;
}

.center {
background-color: white;
width: 60%;
}

.right {
background-color: gainsboro;
width: 20%;
}

.footer {
height: 20px;
margin-left: 20%;
margin-right: 20%;
text-align: center;
width: 60%;
background-color: red;
}
<body>
<div class="container">
<div class="left"></div>
<div class="center">Bla bla bla bla bla</div>
<div class="right"></div>
</div>

<div class="footer">this is a footer!</div>
</body>

最佳答案

如果您需要将页脚放在中心栏的底部,请将其放在其中。使用 .center 中的 display: flex,您可以在 .footer 中使用 margin-top: auto 来推送它到底部。

.container {
display: flex;
flex-direction: row;
width: 100vw;
height: 100vh;
}

body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}

.left {
background-color: gainsboro;
width: 20%;
}

.center {
display: flex;
flex-direction: column;
background-color: white;
width: 60%;
}

.right {
background-color: gainsboro;
width: 20%;
}

.footer {
width: 100%;
height: 20px;
margin-top: auto;
text-align: center;
background-color: red;
}
<body>
<div class="container">
<div class="left"></div>
<div class="center">
Bla bla bla bla bla
<div class="footer">this is a footer!</div>
</div>
<div class="right"></div>
</div>
</body>

关于html - 未对齐的 CSS 布局 - 具有固定中心的 3 col 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58151449/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com