gpt4 book ai didi

html - 容器和底部位置不正确

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

我有这个 HTML 代码

<body>
<div id="container">
<div id="header">
<ul>
<li><a href="index.php" class="active"><span>Home</span></a></li>
<li><a href="login.php" class="active"><span>Login</span></a></li>
<li><a href=""><span>Left Menu</span></a></li>
</ul>
</div>

<div class="threecol">
<div class='col3'>
xg<br /><br />hxh<br /><br />x<br /><br />f<br /><br />h
</div>
<div class="col2">
jjh<br /><br /><br />ghjh<br />x<br /><br /><br /><br />g
</div>
<div class='col1'>
kgkdfh
</div>
</div>

<div id="footer">
<p>This page <a href="">Powered</a> by <a href="">dddddd</a></p>
</div>
</div>
</body>

和CSS:

 #container {
width: 98%;
margin: 0 auto;
}
#header {
clear:both;
width:100%;
}
.threecol {
position: relative;
}
.col1 {
left: 1%;
position: absolute;
width: 15%;
background-color: #eee;
}
.col2 {
background-color: white;
left: 16%;
width: 58%;
position: relative;
}
.col3 {
left: 74%;
top :0;
position: absolute;
width: 24%;
}
#footer {
margin: 0 auto;
position: relative;
bottom: 0;
width:100%;
border-top: 1px solid #000;
}

我得到的是:

  1. 容器不在整页中,容器中有一些div
  2. 页脚不在底部,他在 div 上。

我在定位和如何获得我想要的正确结果之间迷失了方向。我做错了什么?

jsfiddle 中用于演示

最佳答案

1) Col2 样式应该是:

   .col2 {
background-color: white;
left: 16%;
width: 58%;
position: absolute;
top: 0;
}

将位置更改为绝对位置并添加 top: 0;声明。

2) Google 粘性页脚。这非常复杂。

关于html - 容器和底部位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16887923/

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