Question

有六个图像，应该以两行显示（虽然实际上它们是十二个因为我使用悬停效果）。问题是图像不会显示在两行上。如果我放一个固定的高度，看起来不错。例如500px。但这会导致响应式问题。

我尝试过千种配方。显示：块，内联，自动等。但似乎没有什么效果好。

这里我留下简化的代码，如果有专家可以告诉我什么是失败的。谢谢！

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>

Answer 1

如果您想使用display:flex使用可变高度图像执行2行3图像布局，请创建两个Flexbox容器，每个容器中包含3个子容器。（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>

将容器设置为弹性框，将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。

Answer 2

您需要设置父级的高度，即html页面和正文然后尝试使用高度百分比的图像如果你设置所有相同高度的图像，最好使用一个普通的类并设置它的高度。将以下内容添加到您的CSS

html,body{
height:100%;
}

神秘高度100％无法正常工作

2 个答案: