如何将两个或三个元素连续放置？答案

【问题标题】：How do I put elements two or three in a row?如何将两个或三个元素连续放置？
【发布时间】：2018-11-05 07:30:06
【问题描述】：

我必须构建一个流畅、可扩展、独立于设备的布局，我需要将 4 个元素连续放置，以便它们调整大小并粘在一起。比方说，4 张图片，因为它们自然是 - 一个在另一个之上，我只想将它们分组为两行 - 2 张图片并排在 1 行中，这样我的布局或结构就没有问题了。你能告诉我怎么做吗？谢谢！

【问题讨论】：

结合媒体查询查看 flexbox。

标签： html css layout positioning fluid

【解决方案1】：

使用 flexbox 并使其像这样响应：

.element-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.element-row {
  display: flex;
}

.element {
  flex: 0 1 46%;
  margin: 0 2% 20px 2%;
  margin-bottom: 3%;
  max-width: 150px;
}

.element img {
  display: block;
  width: 100%;
}

<div class="element-container">
  <div class="element-row">
    <div class="element">
      <img src="http://via.placeholder.com/150x150">
    </div>
    <div class="element">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
  <div class="element-row">
    <div class="element">
      <img src="http://via.placeholder.com/150x150">
    </div>
    <div class="element">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
</div>

【讨论】：

是的。该结构有效，但在屏幕宽度测试期间元素相互相遇后，元素不会调整大小 - 它们不会自动变小，我不知道如何让它们调整大小......