如何使用包含图像和文字的方框

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 2

.wrapper { 
  display:flex; 
  justify-content:space-between;
  width: 65vmax; 
  height:30vmax;
  border: 1px solid black;
}
.box { 
  flex: 0 0 40%;
  height: 100%; 
  text-align:center; 
  border: 1px solid black;
}

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