Question

我的标题中有两个div - 一个用于导航（.site-navitation）栏，另一个用于我的标题图像（.side-branding）。 .site-navigation设置为50px高，.site-branding设置为400px。当一个接一个地放置时，理论上，.site-branding div应该从屏幕顶部开始50px，但由于某种原因，它从0,0开始，隐藏.site-branding后面的.site-navigation 50px } div。

如果有人能帮我弄清楚为什么会发生这种情况，我们将不胜感激。要查看有效问题，请访问http://www.noellesnotes.com。

以下是相关代码：

HTML

            <nav id="site-navigation" class="main-navigation" role="navigation">
                    <h1 class="menu-toggle"><?php _e( 'Menu', 'portfolio' ); ?></h1>
                    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', '_s' ); ?></a>

                    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- #site-navigation -->

            <div class="site-branding">
                <h1 class="site-title">Noelle Devoe</h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            </div>

CSS

#site-navigation {
    width: 100%;
    height: 50px;
    background-color: rgb(255, 255, 255);
}

.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}

.site-branding {
    width: 100%;
    height: 400px;
}

.site-title {
    width: 55%;
    font-family: 'Playfair Display SC', serif;
    text-transform: uppercase;
    font-size: 4.5em;
    background-color: rgba(199,101,56, 0.6);
    line-height: 1em;
    text-align: center;
    color: rgb(255,255,255);
}

Answer 1

删除浮动：在主导航类中左侧，这将解决您的问题

2 Div高度被合并在一起

1 个答案: