Question

我很难通过css将两个图像调到容器中。我重新创建了我正在构建的网站代码部分。

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

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

Answer 1

您发布的所有内容都有100％的高度。链上的东西必须有明确的高度设置才能发挥作用。

Percentage Height HTML 5/CSS

Answer 2

将height: 100%;添加到html, body以为所有这些元素提供适当的高度参考，并移除flex-wrap。

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

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

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

图像未显示在Flex容器中

2 个答案: