当前位置：文江博客话题详情

需要样式帮助 - 一个 div 伸出到一侧。

发布于 2024-11-27 00:41:21 字数 363 浏览 1 评论 0原文

我有一个页面，在一些样式细节方面似乎无法正确。

http://www.comehike.com/earn_money.php

它有两个问题，我似乎不太对劲（主要是因为设计和造型是我的致命弱点）。

问题1：在底部，页脚div向右突出。我尝试将它包装在 diff div 中，并通过 FireBug 进行查看，但似乎无法让它停止突出....可能是因为我累了并且脑死亡:)

问题 2：你看到主页 div 是如何显示的吗？结束于页脚和 div 上方？有没有办法让页面的主要区域延伸到页脚下方？

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

欢烬 2024-12-04 00:41:21

对于问题的第一部分，您可以通过简单地删除页脚上的 width 属性来修复它，因为它是一个块元素，并且它将占据 100% 的可用宽度（在填充/边距之后） /ETC）。

对于您问题的第二部分，我不太确定您在问什么，但我认为您可以将 #mainBody 上的样式更改为： padding: 5px 5px 20px; 或者第三个值的其他大数？

回复收藏 0 原文

暗恋未遂 2024-12-04 00:41:21

从页脚的 CSS 中删除 width。
如果您希望页脚位于主页中，则必须将其定位在 .basic

回复收藏 0 原文

新雨望断虹 2024-12-04 00:41:21

将页脚 div 宽度从 960 设置为 900px 将解决页脚伸出

width: 900px;

问题 2。布局是正确的。这就是布局

<div>
   <div class="basic">
   <div> <-- google ads
   <div> <-- footer
</div>

解决此问题的方法，只需将布局更改为此

<div>
   <div class="basic">
       <div /> <-- google ads
       <div /> <-- footer
   </div>
</div>

Set footer div width to 900px from 960 will fix footer sticking out

width: 900px;

problem2. The layout is correct how it should be. This is how the layout is

<div>
   <div class="basic">
   <div> <-- google ads
   <div> <-- footer
</div>

to fix this simply change the layout to this

<div>
   <div class="basic">
       <div /> <-- google ads
       <div /> <-- footer
   </div>
</div>

回复收藏 0 原文

此岸叶落 2024-12-04 00:41:21

问题 #1：

您似乎希望页脚宽度为 960 像素。但是您有一个 10 像素的白色边框，实际上使页脚宽度为 980 像素。删除边框，页脚将再次变为您设计的 960 像素。然后看来您必须调整 width: 960px; 直到它正确适合。 950px 似乎效果很好。

.footer{
    width: 960px;
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
    border: 10px solid #fff;  
}

应该是...

.footer{
    width: 950px; /* adjust the width to fit */
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
}

问题#2：

您需要将横幅的

和

...

...

的内部并靠近底部

Problem #1:

Looks like you want your footer to be 960 pixels wide. But you have a 10 pixel white border which actually makes the footer 980 pixels wide. Remove the border and your footer will again be 960 pixels as you designed. Then it appears you'll have to tweak width: 960px; until it fits properly. 950px seems to work well.

.footer{
    width: 960px;
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
    border: 10px solid #fff;  
}

Should be...

.footer{
    width: 950px; /* adjust the width to fit */
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
}

Problem #2:

You need to put the banner's <div> and <div class="footer">...</div> inside of and near the bottom of <div class="basic">...</div>

回复收藏 0 原文

~没有更多了~