gpt4 book ai didi

css - 2个div高度合并在一起

转载 作者:行者123 更新时间:2023-11-28 11:30:03 25 4
gpt4 key购买 nike

我的标题中有两个 div - 一个用于导航 (.site-navitation) 栏,另一个用于我的标题图片 (.side-branding)。 .site-navigation 设置为 50px 高,.site-branding 设置为 400px。当一个接一个放置时,理论上,.site-branding div 应该从屏幕顶部开始 50px,但由于某种原因,它从 0,0 开始,隐藏了 50px 的 .site-branding.site-navigation 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);
}

最佳答案

删除 float: left 在 main-navigation 类中,这将解决您的问题

关于css - 2个div高度合并在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21198192/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com