gpt4 book ai didi

重叠的 HTML 部分

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

我有以下简单的 HTML 布局

.section1 {
background: red;
}

.section2 {
background: green;
}

.section3 {
background: yellow;
}

article {
float: left;
width: 33%;
}
<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>

<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>

<section class="section3">
Section 3 content
</section>

第二和第三部分重叠,我做错了什么?

最佳答案

这是由于 float 性质。您需要为 section2 使用 clearfix:

/* clearfix */
.section2:after {
content: "";
display: table;
clear: both;
}

演示:

.section1 {
background: red;
}

.section2 {
background: green;
}

/* clearfix */
.section2:after {
content: "";
display: table;
clear: both;
}

.section3 {
background: yellow;
}

article {
float: left;
width: 33%;
}
<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>

<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>

<section class="section3">
Section 3 content
</section>

但是您可以使用更现代和更强大的 flexbox 方法来代替 float(因此您可以删除 float 样式):

.section1 {
background: red;
}

.section2 {
display: flex; /* new */
flex-wrap: wrap; /* new */
background: green;
}

.section2 p {
width: 100%; /* new */
}

.section3 {
background: yellow;
}

article {
width: 33%;
}
<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>

<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>

<section class="section3">
Section 3 content
</section>

关于重叠的 HTML 部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44995543/

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