gpt4 book ai didi

html - 如何在 2 个 div 之间定位页脚?

转载 作者:太空宇宙 更新时间:2023-11-04 02:26:10 26 4
gpt4 key购买 nike

所以我只是在尝试创建一个 3 列布局。我无法让页脚位于底部的这 2 个 div 侧边栏之间。基本上我的中间栏不会像我的边栏一样一直向下,我的中间栏被切断所以我可以将页脚放在它的正下方并且它与我的边栏对齐。 Margin-left 是我知道我可以做的事情,但我不想那样做,因为我相信有更好的方法。

What I have so far

这是我目前所拥有的

<!DOCTYPE html>
<html>
<head>
<title>First</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header></header>

<div id="first-column"></div>

<div id="middle-column"></div>

<div id="third-column"></div>

<footer></footer>

</body>
</html>

CSS

html, body {
height: 100%;
margin: 0;
}

header {
background-color: #444444;
width: 100%;
height: 20%;
}

#first-column {
width: 15%;
height: 80%;
background-color: #d8d8d8;
float: left;
}

#middle-column {
width: 70%;
height: 70%;
float: left;
background-color: red;
}

#third-column {
width: 15%;
height: 80%;
background-color: #d8d8d8;
float: left;
}

footer {
background-color: #222222;
height: 10%;
width: 70%;
position: absolute;
bottom: 0;
margin-left: 100px;
}

最佳答案

有很多方法可以解决这个问题。你可以做的最基本的改变来使这个布局工作:

您的左列 width 设置为 15%。如果将页脚的 margin-left100px 更改为 15%,它们将全部排成一行。

https://jsfiddle.net/7ufL979v/

关于html - 如何在 2 个 div 之间定位页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37285900/

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