Question

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

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

＆＃13;

.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;
} 
}

＆＃13;

    <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>

＆＃13;

Answer 1

这是由于浮动元素不会被父元素自动包围。将unset($data['Merchant Reference Code']); $data['Order Id'] = $order->getIncrementId();添加到overflow: auto;以解决问题。

.sections

.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;
    overflow: auto;
}
.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;
} 
}

Answer 2

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

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

.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>

Answer 3

这是因为你的底部两个div被设置为浮动，并且没有与文本一致。

要解决此问题，请将子项设置为display：inline block并删除float属性。或者，只需显式设置父div的高度。

为什么父div不在移动视图中包含其他人

3 个答案: