gpt4 book ai didi

html - CSS 边框不环绕嵌套的 div

转载 作者:行者123 更新时间:2023-11-28 05:19:58 29 4
gpt4 key购买 nike

只是想知道为什么 .border 不会环绕嵌套的 div d1、d2、d3。

id 为 main1 的 div 有一个 5px 的实线边框,我试图围绕三个嵌套的 div,id 分别为 div1、div2、div3。每个嵌套的 div 都有自己的 2px 实线边框。似乎它应该可以工作,但也许某些地方被覆盖了。

enter image description here

.border {border: 5px solid RosyBrown;}
.border-thin {border: 2px solid RosyBrown;}
div#main1 {width: 90%;margin: 0 auto 0 auto;}
div#d1 {width: 31%; float: left;}
div#d2 {width: 31%; float: left; margin: 0 0 0 3.5%;}
div#d3 {width: 31%; float: right;}

<div id="main1" class="center border">
<p>Main</p>
<div id="d1" class="border-thin">
<p>d1</p>
</div>
<div id="d2" class="border-thin">
<p>d2</p>
</div>
<div id="d3" class="border-thin">
<p>d3</p>
</div>
</div>

最佳答案

因为您还没有清除 float ,因为它不占用 View 的流。给:

overflow: hidden;

到父 div,或者您可以使用 clearfix

.border {
border: 5px solid RosyBrown;
}
.border-thin {
border: 2px solid RosyBrown;
}
div#main1 {
width: 90%;
margin: 0 auto 0 auto;
overflow: hidden;
}
div#d1 {
width: 31%;
float: left;
}
div#d2 {
width: 31%;
float: left;
margin: 0 0 0 3.5%;
}
div#d3 {
width: 31%;
float: right;
}
<div id="main1" class="center border">
<p>Main</p>
<div id="d1" class="border-thin">
<p>d1</p>
</div>
<div id="d2" class="border-thin">
<p>d2</p>
</div>
<div id="d3" class="border-thin">
<p>d3</p>
</div>
</div>

预览

--

关于html - CSS 边框不环绕嵌套的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40042753/

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