<分区>
<分区>
编辑:我相信我已经自己解决了这个问题。 “主体容器”Div 需要“溢出:隐藏”。感谢那些提供帮助的人。
我正在设计一个网站,我计划将来将其转换为 Wordpress 模板。我当前遇到的问题是包含我的“新闻”Div 和“侧边栏”Div 的 Div 的背景在我 float “侧边栏”Div 时消失。我已经为此工作了几个小时,但似乎找不到问题所在。
Here's the web page in question.
HTML:
<div id="body">
<div id="body-container">
<div id="news">
<div id="post-1" class="news-posts">
Post 1
</div>
<div id="post-2" class="news-posts">
Post 2
</div>
<div id="post-3" class="news-posts">
Post 3
</div>
<div id="post-4" class="news-posts">
Post 4
</div>
<div id="post-5" class="news-posts">
Post 5
</div>
</div>
<div id="sidebar">
</div>
</div>
</div>
CSS:
#body {
margin: 0;
padding: 0;
height: auto;
width: 100%;
}
#body-container {
margin: 0 auto 0;
height: auto;
width: 1060px;
-moz-box-shadow: 0pt 0pt 5px rgb(0, 0, 0), 0pt 0pt 1px rgba(255, 255, 255, 0.03) inset;
-webkit-box-shadow: 0pt 0pt 5px rgb(0, 0, 0), 0pt 0pt 1px rgba(255, 255, 255, 0.03) inset;
box-shadow: 0pt 0pt 5px rgb(0, 0, 0), 0pt 0pt 1px rgba(255, 255, 255, 0.03) inset;
background: #9A9A9A;
border: thin solid black;
}
#news {
height: auto;
width: 735px;
padding: 5px;
float: left;
}
#sidebar {
height: 500px;
width: 200px;
-moz-box-shadow: 0pt 0pt 5px rgb(0, 0, 0), 0pt 0pt 1px rgba(255, 255, 255, 0.03) inset;
-webkit-box-shadow: 0pt 0pt 5px rgb(0, 0, 0), 0pt 0pt 1px rgba(255, 255, 255, 0.03) inset;
box-shadow: 0pt 0pt 5px rgb(0, 0, 0), 0pt 0pt 1px rgba(255, 255, 255, 0.03) inset;
background: #FFF;
clear: right;
margin-top: 5px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
float: right;
}
.news-posts {
height: 200px;
width: 636px;
background: #FFF;
padding: 15px;
margin-bottom: 10px;
-moz-box-shadow: 0pt 0pt 5px rgb(0, 0, 0), 0pt 0pt 1px rgba(255, 255, 255, 0.03) inset;
-webkit-box-shadow: 0pt 0pt 5px rgb(0, 0, 0), 0pt 0pt 1px rgba(255, 255, 255, 0.03) inset;
box-shadow: 0pt 0pt 5px rgb(0, 0, 0), 0pt 0pt 1px rgba(255, 255, 255, 0.03) inset;
}
最佳答案
“主体容器”Div 需要“溢出:隐藏”。
关于html - Div 标签对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8284654/
相关文章:
css - 如何在 WordPress 的 CSS 文件中添加 GIF 和 SVG 的 URL?
javascript - HTML 或 Javascript 问题 - 图像测试
javascript - 滚动到页面的特定部分后启动 CSS 动画
javascript - 谷歌图片搜索鼠标悬停,它们是如何工作的?
javascript - 将鼠标悬停在输入的背景颜色上并删除禁用的红色圆圈?
jquery - 记住我复选框 : To Store authentication information safely?