gpt4 book ai didi

html - 标题和部分相互合并/重叠

转载 作者:行者123 更新时间:2023-11-28 00:42:19 26 4
gpt4 key购买 nike

我是一个新手,如果这是一个愚蠢的问题,请原谅我。我想有一个部分与标题分开,但发生了两种情况:

(1) 当我把 <section></header> 下面,它们相互重叠,如下所示: Section overlapping header (该部分是“同情是我们的指南针”)。

(2) 然而,当我把 <section> 内部 <header>在 html 中,它看起来很正常:Section inside of the header .

问题是我不希望该部分位于页眉内,因为毕竟它不是页眉的一部分,它位于展示区,所以我希望它是不同的东西。但我也希望它的显示方式与我将其放入页眉时的显示方式相同。

我已经从代码中删除了一些东西(图标、 Logo 和菜单)以使其不那么困惑并且对你们来说更好。

(1)情况(Overlapping)的代码:

HTML

<body>
<header>
<div class="container">
<div id="info">
<!-- Icons and emails -->
</div>

<div id="branding">
<!-- Logo -->
</div>

<nav>
<ul>
<!-- Navbar Menu is here -->
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Compassion is our Compass</h1>
</div>
</section>
</body>

CSS

body{
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
line-height:1.6em;
}

.container{
overflow:hidden;
margin:auto;
width:80%;
}

/*HEADER*/
header{
background:#6fc4e2;
max-height:30px;
padding-right:10px;
}

#branding{
padding-top:20px;
margin-top:30px;
text-align:center;
max-height:300px;
padding-right:10px;
border-bottom:#6fc4e2 solid 2px;
}

header nav ul li{
display:inline;
text-align:center;
padding:0 15px 0 15px;
}

(2)情况的代码(看起来很正常,但是section在header里面(不想那样)):

HTML:

<body>
<header>
<div class="container">
<div id="info">
<!-- Icons and emails -->
</div>

<div id="branding">
<!-- Logo -->
</div>

<nav>
<ul>
<!-- Navbar Menu is here -->
</ul>
</nav>
</div>
<section id="showcase">
<div class="container">
<h1>Compassion is our Compass</h1>
</div>
</section>
</header>
</body>

CSS 相同。

PS:导航也发生了同样的事情,但我决定将它留在标题中以省去麻烦。

很抱歉,如果这让你感到困惑,我希望你们能理解

如果有人想测试它,这里是完整的代码:https://justpaste.it/5sr2a

最佳答案

您正在提供 <header> max-height: 30px;看起来你是为背景做的,但由于你的内容“高于”30px,它会溢出你的 <header>但是选择在那些 30px 之后开始。这就是为什么它重叠。 删除 max-height你的标题并添加 background-color仅适用于您想要的元素。不是父元素。

关于html - 标题和部分相互合并/重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53746052/

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