爲什麼父div不包含移動視圖上的其他人

每當我將瀏覽器縮小到移動視圖時，出於某種原因，淡綠色的'sections'div不包含home-img-2和home-img-3 div 。爲什麼會發生這種情況，以及如何解決這個問題？爲什麼父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>

來源

2017-07-27 user3760941

這是因爲您的容器內的元素是浮動的。浮動元素不在流動中，因此不會像流入元素那樣影響其周圍元素的流動。

解決此問題的一種方法是在浮動元素下添加一個流入元素。這將強制父級的高度增長以適應該元素。

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

來源

2017-07-27 01:23:38

這是因爲你的底兩個div被設置爲浮動，並沒有被放置在符合文本。

要解決此問題，請設置子項以顯示：內聯塊並刪除浮動屬性。另外，只需明確設置父div的高度即可。

來源

2017-07-27 01:07:58 JSideris

但高度是自動那麼，爲什麼不能自動覆蓋的div？刪除浮動和替換內聯塊只是完全刪除綠色的div，我想它包裹子元素 – user3760941

什麼？這不是真的。請注意，你在三個地方設置浮動。全部刪除3.下面是刪除所有浮標後的樣子：https：//jsfiddle.net/mmufjc82/。顯然，需要更多的樣式來模擬浮動的功能。 – JSideris

這是由於浮動元件，其不會自動可以通過父元素包圍。將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; 
 
} 
 
}

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

來源

2017-07-27 01:24:23 Johannes

爲什麼父div不包含移動視圖上的其他人

回答

相關問題