为什么移动视图上的父 div 不包含其他 div

debugcn 发表于 Dev

用户3760941

每当我将浏览器缩小到移动视图时，出于某种原因，浅绿色的“部分”div 不会覆盖 home-img-2 和 home-img-3 div。为什么会发生这种情况，如何解决？

我试过清除，相对定位，浮动和一切，但仍然没有。我有一种感觉，这将是一个明显的解决方案。解释为什么会发生这种情况也很有用。谢谢你的帮助。

.sections {
    max-width: 960px;
    height: auto;
    background: #0f0;
    margin: 0 auto 50px auto;
}
.home-img-1 {
    background: url('https://static1.squarespace.com/static/51b062bbe4b0aa90845eb0bd/t/562c077fe4b0338f867f8289/1445764004896/?format=500w');
    background-size: cover;
    width: 60%;
    height: 400px;
    float: left;
    margin-right: 5%;
}
.home-img-2, .home-img-3 {
    background: url('https://neslihanaydin.files.wordpress.com/2012/02/agac_1.jpg');
    background-size: cover;
    width: 35%;
    height: 175px;
    float: left;
}
.home-img-3 { margin-top: 50px; }


/* MOBILE VIEW */

@media (max-width: 768px) {
.sections {
    padding: 0 15px;
}
.home-img-1 {
    float: none;
    width: 100%;
    margin-bottom: 50px;
}
.home-img-2, .home-img-3 {
    float: left;
    width: 45%;
    margin: 0;
}
.home-img-3 {
    float: right;
} 
}

    <section class="sections">
        <!-- 60% + 10% + 30% -->
        <article class="home-img-1"></article>
        <article class="home-img-2"></article>
        <article class="home-img-3"></article>
    </section>

查瓦·盖尔扎勒

这是因为容器内的元素是浮动的。浮动元素是流出元素，因此它们不会像流入元素那样影响周围元素的流动。

解决这个问题的一种方法是在浮动元素下方添加一个流入元素。这将强制父元素的高度增长以容纳该元素。

.sections {
    max-width: 960px;
    height: auto;
    background: #0f0;
    margin: 0 auto 50px auto;
}
.home-img-1 {
    background: url('https://static1.squarespace.com/static/51b062bbe4b0aa90845eb0bd/t/562c077fe4b0338f867f8289/1445764004896/?format=500w');
    background-size: cover;
    width: 60%;
    height: 400px;
    float: left;
    margin-right: 5%;
}
.home-img-2, .home-img-3 {
    background: url('https://neslihanaydin.files.wordpress.com/2012/02/agac_1.jpg');
    background-size: cover;
    width: 35%;
    height: 175px;
    float: left;
}
.home-img-3 { margin-top: 50px; }


/* MOBILE VIEW */

@media (max-width: 768px) {
.sections {
    float: none;
    padding: 0 15px;
}
.home-img-1 {
    float: none;
    width: 100%;
    margin-bottom: 50px;
}
.home-img-2, .home-img-3 {
    float: left;
    width: 45%;
    margin: 0;
}
.home-img-3 {
    float: right;
}
.clear {
  clear: both;
}
}

<section class="sections">
        <!-- 60% + 10% + 30% -->
        <article class="home-img-1"></article>
        <article class="home-img-2"></article>
        <article class="home-img-3"></article>
        <!-- in-flow element - parent element's height will grow to cover this one -->
        <article class="clear"></article>
    </section>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。