gpt4 book ai didi

html - 子部分内的文本将父部分向下推

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

所以我这里有这个 HTML 和 CSS:

<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<div id="wrapper">
<section id="sidebar">
<section class="widget">
This is a Widget. This type of widget is not collapsible.
</section>
</section><!-- I hate "display: inline-block;" whitespace
--><main>
</main>
</div>
</body>
</html>

主.css:

*
{
margin: 0;
padding: 0;
}

html, body, #wrapper
{
width: 100%;
height: 100%;
overflow: hidden;
}

#sidebar
{
display: inline-block;
background-color: #5C1B88;

width: 300px;
height: 100%;
}

#sidebar > .widget
{
width: 260px;
height: 200px;
margin: 0 20px;
background-color: rgb(210, 211, 228);
}

main {
display: inline-block;
background-color: #C2A1E7;
height: 100%;
width: calc(100% - 300px);
}

在 Firefox 和 Chrome 中,只要我在子 section.widget 中有文本,section#sidebar 就会被下推。是什么原因造成的?

jsfiddle:https://jsfiddle.net/NeonGuilmon/k6qrbm04/embedded/result/

最佳答案

因为默认情况下,内联元素有一个 vertical-align 基线 的值。不过,这仅在它具有任何内容时才适用。解决方法很简单,为#sidebar定义vertical-align: top;

关于html - 子部分内的文本将父部分向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28645390/

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