gpt4 book ai didi

html - div 不继承 css(他们应该)

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

我有这个带有一些嵌套的简单 html 和 css (sass),但不多。我遇到的问题是,在第一个大 div 中,所有子元素都按照编写的方式显示在内部,但在另一个 div(同一类)中,bg-color 和边距仅覆盖标题,而不覆盖该 div 中的其他元素。发生了什么事?

codepen link

* {
box-sizing: border-box;
}

.intro {
position: relative;
display: block;
background: #F3F5F8;
padding: 50px 0;
text-align: center;
color: slategray;
}
.intro:nth-child(2) {
background: #e8e6e3;
}
.intro section {
margin-left: auto;
margin-right: auto;
padding-left: 50px;
padding-right: 50px;
width: 600px;
}
.intro section .column {
position: relative;
float: left;
width: 33.33333%;
padding: 0 20px;
}
.intro section .column .item {
position: relative;
margin: 30px auto;
width: 15px;
height: 15px;
max-width: 100%;
display: block;
background: cadetblue;
border-radius: 50%;
}
.intro section .column h3 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section .column p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0;
margin: 25px 0;
}
.intro section h2 {
font: 2em "Montserrat", sans-serif;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.intro section h4 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0 120px;
margin: 45px 0 0;
}
<div class="intro">
<section>
<h4>WHO WE ARE</h4>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorum voluptas, ullam vero est.</p>
</section>
</div>

<div class="intro">
<section>
<h4>WHAT WE DO</h4>
<h2>HEADING</h2>
<div class="column">
<div class="item"></div>
<h3>ITEM1</h3>
<p>Necessitatibus ipsa ex hic sunt maxime.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM2</h3>
<p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>
</div>

谢谢

最佳答案

因为您的 .column div 是 float:left; 您需要一个在列之后带有 clear:both; 的容器:

<section>
<h4>WHAT WE DO</h4>
<h2>HEADING</h2>
<div class="column">
<div class="item"></div>
<h3>ITEM1</h3>
<p>Necessitatibus ipsa ex hic sunt maxime.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM2</h3>
<p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="clearer"></div>
</section>

CSS

.clearer {
clear:both;
}

http://codepen.io/anon/pen/myvwNY

如果没有 clear, float div 所在的容器就没有高度。

关于html - div 不继承 css(他们应该),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29241921/

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