圖像不在Flex容器中顯示

我有困難通過CSS調用兩個圖像到他們的容器。我已經重新創建了我在下面構建的網站的部分代碼。圖像不在Flex容器中顯示

section本身跨越100％的寬度。該部分中的image containers將佔據100％寬度中的每一個的50％，並且左側和右側分別爲flex。但是當我將這些圖像稱爲圖像時，我並不確定代碼的哪一部分會妨礙圖像的顯示。下面是我的代碼：您發佈

main { 
 
    height:100%; 
 
    width: 100%; 
 
    background-color: white; 
 
} 
 

 
.section { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.for-eduBusiness { 
 
    height: 100%; 
 
    width: 100%; 
 
    min-height: 450px; 
 
    border: 1px solid; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.image-container-left { 
 
    height: 100%; 
 
    width: 50%; 
 
    border: 1px solid red; 
 
\t flex: 0 0 auto; 
 
\t background: #ccc 
 
url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center; 
 
\t background-size: cover; 
 
\t 
 
} 
 

 
.image-container-right { 
 
    height: 100%; 
 
\t flex: 0 0 auto; 
 
    width: 50%; 
 
    border: 1px solid red; 
 
\t background: #ccc url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center; 
 
\t background-size: cover; 
 
}

<main> 
 
\t <div class="section for-eduBusiness"> 
 
\t \t <div class="image-container-left"></div> 
 
\t \t <div class="image-container-left"></div> 
 
\t </div> 
 
</main>

來源

2017-09-15 Theodore Steiner

添加到您的代碼：HTML，身體{身高：100％; } * –

任何事物都有100％的高度。鏈條上的某些東西必須具有明確的高度才能起作用。

Percentage Height HTML 5/CSS

來源

2017-09-15 18:33:47 Pytth

非常感謝！你是我這個時刻的英雄！ –

哦，哥們，我知道這種感覺。樂意效勞！ – Pytth

添加height: 100%;到html, body給所有這些內容的適當高度的參考，並去除柔性包裝。

html, body { 
 
    height: 100%; 
 
} 
 
main { 
 
    height:100%; 
 
    width: 100%; 
 
    background-color: white; 
 
} 
 

 
.section { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.for-eduBusiness { 
 
    height: 100%; 
 
    width: 100%; 
 
    min-height: 450px; 
 
    border: 1px solid blue; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-direction: row; 
 
} 
 

 
.image-container-left { 
 
    height: 100%; 
 
    width: 50%; 
 
    border: 1px solid red; 
 
\t flex: 0 0 auto; 
 
\t background: #ccc 
 
url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center; 
 
\t background-size: cover; 
 
\t 
 
} 
 

 
.image-container-right { 
 
    height: 100%; 
 
\t flex: 0 0 auto; 
 
    width: 50%; 
 
    border: 1px solid green; 
 
\t background: #ccc url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center; 
 
\t background-size: cover; 
 
}

<main> 
 
\t <div class="section for-eduBusiness"> 
 
\t \t <div class="image-container-left"></div> 
 
\t \t <div class="image-container-right"></div> 
 
\t </div> 
 
</main>

BTW：而在你的第二個DIV使用image-container-right，不是兩次image-container-left ...

來源

2017-09-15 18:37:06 Johannes

圖像不在Flex容器中顯示

回答

相關問題