跨越父div的底部

Question

我有一个弹性容器，其中我有两个并排的盒子（当屏幕太小时会在一列中折叠）。

现在，当盒子并排时，我设置它们具有相同的高度，如下图所示。

现在，我想要实现的是将两个框的EDIT按钮放在底部（这意味着只需要移动内容较少的框的EDIT按钮）。

我已经搜索了，但解决方案是使用绝对位置，因为两个盒子中的一个不需要它，如果我将位置绝对放在两个EDIT按钮上，右边的框将是高度较少，因为它不再计算EDIT按钮。

我尝试使用flex，但我宁愿不将这些框设置为显示flex。

Jquery可能有一些解决方案，我已经读过一些关于它的内容，但它只是＆＃34;你可以通过Jquery实现这一点！＆＃34;但是，老实说，我不知道如何。

＆＃13;

＆＃13;

#parent {
  flex-flow: row wrap;
  display: flex;
  align-items: stretch;
}

.box {
  margin: 10px;
  padding: 15px;
  flex: 0 1 calc(50% - 50px);
  
}

.box:last-of-type {
  background-color: green;
}
  
  
.box:first-of-type {
  background-color: red;
}

.cool-form {
  display: flex;
  flex-direction: column;
}

.button-container {
  display: block;
  margin-left: 5px;
  margin-top: auto;
  align-self: center;
}

.button {
  background-color: white;
  display: inline-block;
  width: 120px;
  height: 48px;
  line-height: 48px;
  border: 1px solid black;
  text-align: center;
  cursor: pointer;
}

＆＃13;

<div id="parent">
  <div class="box">
    <form class="cool-form">
      <h1>Box on left</h1>
      <p>This is a shorter box</p>

      <span class="button-container">
        <span class="button">EDIT</span>      
      </span>
    </form>
  </div>
  
  <div class="box">
    <form class="cool-form">
      <h1>Box on right</h1>
      <p>This is</p>
      <p>a</p>
      <p>bigger</p>
      <p>waaay bigger</p>
      <p>Box</p>

      <span class="button-container">
        <span class="button">EDIT</span>
      </span>
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将flexbox添加到这些div（使用flex-direction:column）似乎微创（这可能是一个问题）。

.box {
  display: flex;
  flex-direction: column;
}

然后你可以给按钮容器margin-top:auto并将其自动推到底部。

然后，只需要水平/集中对齐

.button-container {
  margin-top: auto;
  align-self: center;
}

＆＃13;

＆＃13;

#parent {
  flex-flow: row wrap;
  display: flex;
  align-items: stretch;
}

.box {
  margin: 10px;
  padding: 15px;
  flex: 0 1 calc(50% - 50px);
  display: flex;
  flex-direction: column;
}

.box:last-of-type {
  background-color: green;
}

.box:first-of-type {
  background-color: red;
}

.button-container {
  display: block;
  margin-left: 5px;
  margin-top: auto;
  align-self: center;
}

.button {
  background-color: white;
  display: inline-block;
  width: 120px;
  height: 48px;
  line-height: 48px;
  border: 1px solid black;
  text-align: center;
  cursor: pointer;
}

＆＃13;

<div id="parent">
  <div class="box">
    <h1>Box on left</h1>
    <p>This is a shorter box</p>

    <span class="button-container">
      <span class="button">EDIT</span>
    </span>
  </div>

  <div class="box">
    <h1>Box on right</h1>
    <p>This is</p>
    <p>a</p>
    <p>bigger</p>
    <p>waaay bigger</p>
    <p>Box</p>

    <span class="button-container">
      <span class="button">EDIT</span>
    </span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;