gpt4 book ai didi

html - 将页脚图像与内容区域对齐

转载 作者:行者123 更新时间:2023-11-28 14:15:30 24 4
gpt4 key购买 nike

我试图让我的页脚图片与其上方的内容区域对齐,但我不确定如何对齐。我四处浏览并尝试了各种方法,例如添加 clear:both 但无济于事

http://dota-bravery.co.cc/

如你所见,底部卡在了左边

这是带有页脚的代码部分:

#footer {
width: 680px;
height: 100px;
margin: 0 auto;
margin-top: -16px ! important;
padding: 30px 0 0 0;
background: url(http://i.imgur.com/q4neu.png) no-repeat;
}

#footer p {
margin: 0;
padding: 0 0 0 40px;
font-size: 77%;
color: #0F1720;
}

#footer a {
color: #0F1720;
}

我得到了 margin-top: -16px ,因为没有它我在内容和页脚之间有一个空间,这个空间是固定的。请注意,在我放入生成器之前,页脚已正确对齐。自从它位于左侧以来。如果有帮助,我还会复制粘贴其余部分:

<body>
<div id="wrapper">
<div id="header">
<h1>{%WebsiteName%}</h1>
<p>{%WebsiteSlogan%}</p>
</div>
<!-- end header -->
<div id="menu">
<h2>Menu</h2>
<ul>
<!--{%menu_start=1%}-->
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
<!--{%menu_end=1%}-->
</ul>
</div>
<!-- end menu -->
<div id="page">
<div id="content">
<h1 class="title"><span>&nbsp;</span></h1>
<p>{%content%}</p>
</div>
<!-- end content -->
<div style="clear: both;">&nbsp;</div>
</div>
<div id="footer"></div>
<!-- end footer --></div>
<div id="wrapper"></div>
<!-- end wrapper -->
</body>
</html>

最佳答案

您的代码存在一些问题。

您拥有共享相同 ID(包装器)的对象。那是不允许的。如果您想将样式应用于几个对象,请使用类。

要解决您的问题,您只需移动页脚,使其位于第一个包装 div 内(目前它在外面,您正在关闭 fotter div 之前的包装 div - 我已经测试过了,它解决了你的问题)。

此外,将第二个 wrapper 重命名为其他名称。

关于html - 将页脚图像与内容区域对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9083605/

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