html - 来自不同 div 的居中按钮

Question

我有一个关于样式的问题:

我想对齐来自不同 div 的按钮，这些 div 都包含在包装 div 中:

<div wrapper>
  <div 1> Image Text... (button1) </div>
  <div 2> Image Text... (button2) </div>
  <div 3> Image Text... (button3) </div>
</div>

每个子 div 中的文本长度不同，但我需要按钮 1、2 和 3 的高度相同。

供引用(还有我的实际问题给大家看看):

http://www.maf-swiss.org/fliege-mit/#mitarbeiter_werden (向下滚动一点，3 张图片是子 div 开始的地方，下面是文本和按钮)

如您所见，按钮只是跟在文本之后，我尝试了很多方法，但我似乎总是只引用子 div，而不是包装器 div。

我是否需要在子 div 中使用绝对位置，以便第一个相对定位是包装 div 中的位置？ (如果这有任何意义，否则请忽略此 :D)

这是否可以仅使用 CSS 实现，还是我需要更改该部分的布局？

编辑:经过进一步调查，我意识到问题有点复杂:

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container {
  display: flex;
}

.container > div {
  width: 200px;
}

.content {
  padding: 6% 8%;
}

.boxButton {
  text-align: center;
}

.image {
  margin-left: auto;
  margin-right: auto;
}

<div class="container">
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus. Sed ut convallis lorem, non tincidunt sapien.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src="http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg">
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
</div>

在阅读了 flexboxes 的教程后，我明白为什么它现在看起来像这样了。有没有办法使用 flexbox 使内容包装器中的文本紧跟在图像 div 之后，但按钮仍在容器底部？

我可以在 contentWrapper 中更改或添加 div，但它周围的布局是固定的。

Answer 1

更新

你编辑了你的问题，所以我更新了我的代码片段。原理还是和我原来的回答一样；您只需要将样式应用到正确的 div。

/* Begin changes */
.box, .contentWrapper {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
  display: flex;
}

.contentWrapper {
  flex-grow: 1;
  justify-content: space-between;
}
/* End changes */

.container {
  display: flex;
}

.container > div {
  width: 200px;
}

.content {
  padding: 6% 8%;
}

.boxButton {
  text-align: center;
}

.image {
  margin-left: auto;
  margin-right: auto;
}

<div class="container">
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus. Sed ut convallis lorem, non tincidunt sapien.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src="http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg">
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
</div>

原始答案

如果你只需要支持现代浏览器，有一个 flexbox 解决方案。

.box {
  /* The important stuff */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Not necessary for you; I did this to make the snippet look like your example. */
.container {
  display: flex;
}

.container > div {
  width: 200px;
}

<div class="container">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus. Sed ut convallis lorem, non tincidunt sapien.</p>
    <div>
      <button>Button</button>
    </div>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus.</p>
    <div>
      <button>Button</button>
    </div>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div>
      <button>Button</button>
    </div>
  </div>
</div>

重要的部分是让每个.box包含两个元素。在这种情况下，我将文本放在 <p> 中和 <div> 中的按钮.然后，使用 display: flex . justify-content: space-between拉出 <p>向顶部和<div>向底部。