有六张图片，应该分两行显示(虽然实际上是十二张，因为我使用了悬停效果)。问题是图像没有显示在两行上。如果我把一个固定的高度看起来不错。例如 500 像素。但这会给响应式带来问题。
我试过千式。显示: block 、内联、自动等。但似乎没有什么能给出好的结果。
如果专家可以告诉我失败的地方，我在这里留下简化的代码。谢谢!
CSS
<style type="text/css">
html,body {height:100%;
}
.image-grid {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.image-grid .image {
width: 33%;
padding-left:6px;
padding-left:6px;
}
.image-grid .image img {
width: 100%;
}
#cf {
position:relative;
width:33%;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
height:350px;
}
</style>
HTML
<body>
<section class="image-grid">
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top"src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" /></a>
</section>
最佳答案
如果您想要使用 display:flex 进行 2 行 3 图像布局和可变高度图像，请创建两个 flexbox 容器，每个容器内有 3 个 child 。 (Check the demo on Codepen to see this layout working)。
HTML:
<section class="flex-container">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</section>
<section class="flex-container">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</section>
将容器样式设置为 flexbox，将 flex-flow 定义为不换行的行，并使用 justify-content 使图像居中。
.flex-container {
// Sets display as flexbox
display: flex;
// flex-flow is a CSS shorthand for how flexboxes should flow
// In this case, boxes will flow in a row and not wrap to second line
// This is default behavior so you dont have to write this out
flex-flow: row nowrap;
// justify-content will space flexboxes for you; centered in this case
justify-content: center;
}
.flex-child {
padding: 20px;
img {
width: 200px;
}
}
我不是 100% 清楚您要使用此布局做什么，因此我的演示非常简单。 Flexbox 非常强大，可以做的比你在这个例子中要求的更多 - read CSS-Tricks if you want to learn more .
关于html - 神秘高度 100% 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34487866/