DIV 下不需要的内容

Question

我刚开始学习 HTML 和 CSS。我正在尝试重新创建某个站点的一些设计界面，但是运行遇到了问题。导航菜单虽然在 header 中，但出于某种原因出现在其下方。我尝试了多种修复组合，但它们并没有最终奏效，而且我是一个新手，无法完全理解为什么它会做这样的事情。我已经上传了我的网站，并让目录保持打开状态以供探索。代码很小，所以指出我的错误应该更容易一些。

http://razorcloud.cz.cc/

HTML:

<body class="body">
        <header class="header">
            <img style="padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
            <div class="bottom-header">
                <div class="navigation-bar">
                    <ul>
                        <li>
                            <a href="#">Home</a>
                            <div class="dropdown-container dropdown-shadow">
                                <div class="dropdown-column">
                                    <p>This is a simple test to determine how dynamic and fluid the dropdown-container is.</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#">Video</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--<div class="header-alert">
                This website is still under development!
            </div>-->
        </header>

CSS:

.body
{
    margin: auto;
    width: 95%;
    clear: both;
}

.body a
{
    color: inherit;
}

.header
{
    background-color: black;
    color: white;
    display: block;
    font-family: "GillSansStdRegular";
    margin-bottom: 20px;
    position: relative;
}

.bottom-header
{
    display: block;
    position: relative;
    padding: 0 20px;
}

.navigation-bar
{
    color: white;
    display: inline-block;
    font-size: 12px;
    float: right;
    text-transform: uppercase;
}

.navigation-bar > ul
{
    border: transparent 1px solid;
    border-bottom: 0;
    float: left;
    height: 34px;
    list-style: none;
    margin-left: 5px;
}

.navigation-bar > ul a
{
    display: block;
    line-height: 16px;
    margin-right: 23px;
    padding: 0px 2px 0px 2px;
    text-decoration: none;
}

.navigation-bar > ul:active a
{
    background-color: white;
}

.navigation-bar > ul:hover a
{
    color: black;
    height: 31px;
    background: white;
}

.navigation-bar > ul:hover .dropdown-container
{
    display: block;
}

.dropdown-column
{

}

.dropdown-container
{
    color: black;
    display: none;
    position: absolute;
    z-index: 99;
    left: 0;
    width: 100%;
    border-color: black;
    border-top: 2px;
    border-top-style: solid;
}

.dropdown-shadow
{
    margin-top: 0;
    background: url("../images/backgrounds/submenu-bg.png");
    -webkit-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
    -moz-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
    box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
}

.dropdown-shadow:after
{
    display: block;
    clear: both;
}

.header-alert
{
    background-color: white;
    border-bottom: 2px solid black;
    color: black;
    font-family: "GillSansStdLightRegular";
    font-size: 110%;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

Answer 1

您需要浮动您的元素。在 header 中，<img/> 应设置为 float:left，导航容器 (.navigation-bar) 需要设置为 float:right。你需要在浮动之后添加一个 clearfix:

FIDDLE

DIV 下不需要的内容

Content Unwantedly Under DIV

html

css