gpt4 book ai didi

html - 第二个兄弟 div 元素不继承高度

转载 作者:太空宇宙 更新时间:2023-11-04 10:24:43 25 4
gpt4 key购买 nike

尝试更改#Leftbar 的大小,但如果我以像素或百分比为单位进行更改,它不会改变,所以我尝试更改父级大小,以便我可以使用百分比。由于某种原因,它适用于第一个 div 但不适用于兄弟

html

<!DOCTYPE html>

<html lang="en">
<head class="Setup">
<link rel="stylesheet" type="text/css" href="I don't want to reveal my path but it's accurate">
</head>
<body class="Setup">
<div class="Design">
<div class="TopDesign">
<p id="Topbar"></p>
<p id="Minibar"></p>
</div>
<div class="LeftDesign">
<span id="Leftbar"></span>
</div>
</div>
</body>
</html>

CSS

* {
margin: inherit;
box-sizing: inherit;
top: inherit;
left: inherit;
font-family: Menlo;
font-style: italic;
}

html {
margin: 0px 0px 0px 0px;
box-sizing: content-box;
top: 0px;
left: 0px;
}

#Topbar {
background: rgb(255, 0, 0);
width: 100%;
height: 5em;
opacity: 0.6;
}

#Minibar {
position: fixed;
background: rgb(0, 0, 255);
width: 80%;
height: 2.5em;
top: 5em;
left: 5em;
}

#Leftbar {
background: hsl(0, 0%, 0%);
width: 5em;
height: 10em;
}

最佳答案

我仍然觉得我遗漏了什么,但是 html 元素是一个空框。它本身没有高度也没有宽度。即使您定义了高度和宽度,它也就像一个没有内容且尚未用胶带粘在一起的纸板箱。

您可以通过添加 display: block 来解决这个问题。这会将盒子粘在一起,让您可以看到里面的东西。

我不会谈论你有 ems 的事实。这些让我很困惑。

* {
margin: inherit;
box-sizing: inherit;
top: inherit;
left: inherit;
font-family: Menlo;
font-style: italic;
}

html {
margin: 0px 0px 0px 0px;
box-sizing: content-box;
top: 0px;
left: 0px;
}

#Topbar {
background: rgb(255, 0, 0);
width: 100%;
height: 5em;
opacity: 0.6;
}

#Minibar {
position: fixed;
background: rgb(0, 0, 255);
width: 80%;
height: 2.5em;
top: 5em;
left: 5em;
}

#Leftbar {
background: hsl(0, 0%, 0%);
width: 5em;
height: 10em;
display: block; // ?? is this what you're trying to do??
}
<div class="Design">
<div class="TopDesign">
<p id="Topbar"></p>
<p id="Minibar"></p>
</div>
<div class="LeftDesign">
<span id="Leftbar"></span>
</div>
</div>

关于html - 第二个兄弟 div 元素不继承高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36878442/

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