如何使用弹性框将 2 行图像放入“列”中答案

【问题标题】：How to put 2 rows of images inside a 'column' using flex boxes如何使用弹性框将 2 行图像放入“列”中
【发布时间】：2016-04-14 01:09:15
【问题描述】：

我正在使用弹性盒子构建网站。我有一个 div，里面有 2 个“列”，第二个“列”中有 2 个“行”，我必须每个填充两个图像，问题是图像不适合“行”并超过它宽度。

我需要用导航器大小来拉伸或收缩我的图像，所以我不能使用 px 作为它们的大小。

这就是我想要的：

这就是我得到的：

这是我的代码：

#offices {
  background: peachpuff;      
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.col {
  background: yellow;
  flex: 1;      
}
.row {
  background: red;
  line-height: 0;
  display: flex;
}
#officesImg img {
  flex: 1;
  width: 100%;
  height: 100%;
}

<div id="offices">
  <div class="col">
  </div>
  <div class="col" id="officesImg">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
  </div>
</div>

这是CODEPEN

PD：请避免浮动解决方案。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以将#officesImg 设置为display:flex。并从img 中删除了height:100%，这会导致Firefox 出现宽高比问题。

#offices {
  background: peachpuff;
  margin: 1em;
  display: flex;
}
.col {
  background: yellow;
  margin: 1em;
  flex: 1;
}
#officesImg {
  line-height: 0;
  display: flex;
}
#officesImg img {
  width: 100%;
  height: auto;
}

<div id="offices">
  <div class="col">
  </div>
  <div class="col" id="officesImg">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
  </div>
</div>

这是一个与您的线框相匹配的略微抛光的版本。

#offices {
  background: peachpuff;
  margin: 1em;
  display: flex;
}
.col {
  background: yellow;
  margin: 1em;
  flex: 1;
}
#officesImg {
  line-height: 0;
  display: flex;
  padding: .5em;
}
#officesImg img {
  width: calc(100% - 1em);
  height: auto;
  margin: .5em;
}

<div id="offices">
  <div class="col">
  </div>
  <div class="col" id="officesImg">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

最快的解决方案是将每个图像元素包装在一个 div 中。

换句话说：

<div><img ... ></div>

图像保持响应并保持纵横比。

在 Chrome、Firefox 和 IE11 中测试。

Revised Codepen

【讨论】：