html - 如何制作带有图片和文字的方框

Question

是否可以在一行中放置两个正方形 div 框，并在它们之间留出一些空间。它们都以顶部的图像开头，然后是标题、一些文本和底部的按钮？

我用 css:flex 做了一些尝试，但结果是不可能让两个盒子的高度和宽度都相等，它们必须都是正方形。

我的问题是图像上的图像比另一个图像高一点，现在我无法得到两个相同大小的正方形。即使图像相同，文本也会有所不同。也许左边还有更多的字，所以又出现了我无法处理的不同高度。

<div class="wrapper">
  <div class="box">
    <img src="example1.jpg" />
    <h2>Headline 1</h2>
    <p>Description 1</p>
    <button></button>
  </div>
  <div class="box">
    <img src="example2.jpg" />
    <h2>Headline 2</h2>
    <p>Description 2 <br>with special line</p>
    <button></button>
  </div>
</div>

.wrapper { display:flex; flex-wrap:wrap;justfiy-content:space-between; width: 30vmax; }
.box { flex: 0 0 40%; height: 50%; text-align:center; }

编辑

感谢您的工作。它看起来和我的几乎一样。但不幸的是，它不是正方形/正方形。那是我在问题中的目标。我想问题是正方形/样方取决于它的内容。或者我是否需要 javascript 来实现高度等于框的宽度。

Answer 1

.wrapper {
  display: flex;
  justify-content: space-around;
}
.box {
  flex: 0 0 40%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px dashed red;
}
button {
  margin-top: auto;
}

<div class="wrapper">
  <div class="box">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <h2>Headline 1</h2>
    <p>Description 1</p>
    <button></button>
  </div>
  <div class="box">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <h2>Headline 2</h2>
    <p>Description 2
      <br>with special line</p>
    <button></button>
  </div>
</div>

jsFiddle