个人中心
gpt4 book ai didi

html - 如何正确定位此 DIV？

转载 作者：行者123 更新时间：2023-11-28 10:56:52 24 4
gpt4 key购买 nike

好的，我有一个 ID 为“comment”的 DIV 和另一个 ID 为“post”的 DIV。评论和帖子都在另一个名为“content”的 div 中。内容是相对定位的，而评论和帖子是绝对定位的，我可以轻松定位帖子但不能定位评论。问题是由于某种原因，评论的静态位置位于“内容”的最顶部，而不是在帖子 div 下方。另一个问题是我无法正确放置页脚。明确地说，这是代码:http://jsfiddle.net/BWr93/

CSS:

   #header {
    width:100%;
    height:80px;
    background:#444;
    position:absolute;
    top:0%;
    left:0%;
    right:0%;
}
#logo {
    width:280px;
    height:200px;
    background:url(Logo.png);
    background-repeat:no-repeat;
    position:absolute;
    left:2%;
    top:-50px;
}
.button {
    width: 130px;
    height: 80px;
    position: absolute;
    top: 0%;
    font-family:Poiret One;
    line-height:80px;
    font-size:24px;
    color:#fff;
    -webkit-transition: all 150ms ease-in-out   ;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}
.button:hover {
    -webkit-transition:all 200ms ease-in-out
    ;-moz-transition:all 200ms ease-in-out;
    -ms-transition:all 200ms ease-in-out;
    -o-transition:all 200ms ease-in-out;
    transition:all 200ms ease-in-out;
    cursor:pointer;
    background: #333;
}
#container {
    top:80px;
    position:relative;
    width:100%;
    padding-bottom:110px;
    min-height:100%;
}
#post {
    width:80%;
    min-height:300px;
    position:absolute;
    top:6%;
    left:3%;
    font-size:20px;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color:#CCC;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
#post .title {
    width:100%;
    min-height:70px;
    background:#444;
    top:0;
    left:0;
    right:0;
    font-family:Poiret One;
    line-height:70px;
    font-size:34px;
    color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0);
    -moz-box-shadow:    0px 0px 0px 0px rgba(50, 50, 50, 0);
    box-shadow:         0px 0px 0px 0px rgba(50, 50, 50, 0);

}
#post .title .date {
    width:8%;
    height:60px;
    background-color:#FFF;
    float:left;
}
#comment{
    position:absolute;
    bottom:10%;
    left:3%;
    background:#444;
    width:80%;
    height:50px;
    line-height:50px;
}
#footer {
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    width:100%;
    height:60px;
    background:#444;
    line-height:60px;
    font-family:Poiret One;
    font-size:20px;
    color:#FFF;
       }

HTML:

<body>
<!--START HEADER-->
<div id="header">
<div id="logo"></div>
<div class="button" style="left:350px"><center>Home</center></div>
<div class="button" style="left:500px;"><center>For Geeks</center></div>
<div class="button" style="left:650px;"><center>Deep Stuff</center></div>
<div class="button" style="right:50px;"><center>About me</center></div>
</div>
<!--END HEADER-->
<div id="container">

<div id="post">
<div class="title"><div class="date"></div>
<div style="position:relative;left:8px;">
HeyHey Hey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey Hey Hey Hey Hey Hey Hey</div>
</div>
<div style="position:relative;left:8px;">
HeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey 
</div>
</div>
<div id="comment">Comments</div>
<!--FOOTER-->
<div id="footer"><center>All rights reserved Maroworld.com&reg;</center></div>
<!--END FOOTER-->
</div>
</body>

看到就明白了，不管页面内容怎么延伸，我只要底部的footer和帖子div下面的评论div。

提前致谢。

最佳答案

好吧，第一个问题是在这一行中:

    <div class="title"><div class="date"></div>

您缺少一个 </div> <div class="title"> 的标签如果你添加它，如 this fiddle ，您会发现很多问题都已解决。

就获得粘性页脚而言，THIS是一个很好的起点。您可以看到您当前的实现将页脚放置在相对于浏览器窗口的位置。

关于html - 如何正确定位此 DIV？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22583774/

24 4 0
文章推荐： javascript - ajax 成功确认表单后关闭 fancybox
文章推荐： Jquery/UI/Effects/Scale 插件不适用于图像
文章推荐： css - 什么可能导致 Windows 版 Safari 上的布局偏移？
文章推荐： jquery - 使用 jQuery 添加每个匹配元素的高度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com