Question

我试图让div显示在另一个div下面，但它会一直显示在上面的div中。

问题在于“Menubox”Div。

“Menubox”继续显示在“标题搜索框”内而不是下方。

这是HTML。

<header id="header-bar">
    <div id="innerheader">

        <div id="logobox">
        </div><!--End Logobox-->

        <div id="header-search-box">
            <?php get_search_form(); ?>
        </div>

        <nav id="menubox">
            <?php ?>
        </nav><!--End Menubox-->

    </div><!--End Innerheader-->
</header><!--End Header-bar-->

这是CSS ...

#header-bar {
    background: #222;
    height: 75px;
}

#innerheader {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    height: 75px;
}

#logobox {
    float: left;
    font-size: 2em;
    font-weight: 700;
    overflow: hidden;
    width: 300px;
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#header-search-box {
    float:left;
    margin-top:20px;
}

#menubox {
    float: left;
    margin-top: 20px;
}

任何想法都会受到赞赏。

由于

Answer 1

插入

<div style="clear:both;"></div>

两个标签之间。这就像一个分隔符。

Answer 2

这是因为您float:left和header-search-box使用了menubox。这就是它并存的原因。删除它，您将获得所需的结果。

  #header-search-box {
    /*float:left*/
    margin-top:20px;
  }

  #menubox {
    /*float:left*/ 
    margin-top: 20px;
  }

DEMO

Div出现在Div而不是Under

2 个答案: