html - Div 标签对齐问题

标签 html css

<分区>

编辑:我相信我已经自己解决了这个问题。 “主体容器”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/

上一篇:html - Flash电影透明

下一篇:css - JQuery UI datepicker 不从输入字段中显示,但仅从其周围显示

相关文章:

css - 如何在 WordPress 的 CSS 文件中添加 GIF 和 SVG 的 URL?

javascript - HTML 或 Javascript 问题 - 图像测试

javascript - 滚动到页面的特定部分后启动 CSS 动画

javascript - 谷歌图片搜索鼠标悬停,它们是如何工作的?

c# - 使用 Logo 图像将页面导出为 excel

javascript - 将鼠标悬停在输入的背景颜色上并删除禁用的红色圆圈?

css - Richfaces:如何完全控制 css

jquery - 记住我复选框 : To Store authentication information safely?

html - CSS 动画 : drop in from top of fold

html - 一个容器在另一个容器之上?