gpt4 book ai didi

html - float 元素和 "non floated"元素之间的交互

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

<分区>

考虑以下代码:

HTML:

<div class="wrapper">
<div id="inner1">
LINE1
</div>
<div id="inner2">
LINE2
</div>
</div>

CSS:

.wrapper{
width:400px;
overflow: auto;
background-color: #0FC;
}
#inner1{
float: left;
width: 40%;
margin-right: 5%;
margin-left: 5%;
background-color: #69C;
}
#inner2{
float:none;
width: auto;
margin-left: 5%;
margin-right: 5%;
background-color: #C09;
}

输出:

enter image description here

如果我们将 width:auto 更改为例如width:20%(在 #inner2 上)我们得到以下输出:

enter image description here

为什么 #inner2#inner1 下崩溃? #inner1 旁边有足够的空间!

width:autowidth:xx% 之间有什么区别?


此外,我想解释一下第一个示例中缺少 #inner1 的右边距和 #inner2 的左边距。这是边际坍塌效应,不是吗?为什么会发生在这里?

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