Question

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

Answer 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>

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

1 个答案: