图像不在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容器中显示

回答

相关问题