尺寸两个元素，使它们在底部对齐

Question

我有一个弹出窗口，其中包含以下布局：

如果我可以让右边的大盒子更高，那么两个大盒子在底部对齐就好了。

我可以在计算机上通过设置右侧框的高度来做到这一点，以便底部对齐。但是，有一些文本和其他元素确定左侧框的位置。这可能导致位置在不同的计算机上更改（使用不同的浏览器，字体，缩放等）。因此底部可能不会排在另一台用户的计算机上。

有没有人对如何在右边设置大框的高度有任何想法，这样两个框总是在底部对齐？

注意：涉及HTML，CSS或JavaScript的解决方案都将受到赞赏。

修改

添加了jsFiddle。

HTML：

<div id="PopUp">

    <div id="LeftPanel">
        <p>Some Text</p>
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
        <hr>
        <p>Some More Text</p>
        <div id="LeftBox">
        </div>
    </div>

    <div id="RightPanel">
        <p>Some Text</p>
        <div id="RightBox">
        </div>
    </div>

</div>

CSS：

div#PopUp {
    width: 750px;
    height: 350px;
}
div#LeftPanel {
    float: left;
    width: 300px;
    margin-right: 8px;
}
div#RightPanel {
    float: left;
    width: 300px;
}
div#LeftBox {
    border: 1px solid silver;
    height: 150px;
}
div#RightBox {
    border: 1px solid silver;
    height: 150px;
}

Answer 1

flexbox版本

＆＃13;

＆＃13;

div#PopUp {
  width: 750px;
  padding:1em;
  height: auto;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}

div#LeftPanel {
  flex:0 0 300px;

 display: flex;
  flex-direction: column;
}

div#LeftBox {
  border: 1px solid silver;
  flex:1;
}

div#RightPanel {
  flex:0 0 300px;

  display: flex;
  flex-direction: column;
}

div#RightBox {
  border: 1px solid silver;
  flex:1;
}

＆＃13;

<div id="PopUp">

  <div id="LeftPanel">
    <p>Some Text</p>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
    <hr>
    <p>Some More Text</p>
    <div id="LeftBox">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quisquam beatae cumque vel, maxime quaerat, placeat laboriosam ducimus tempora consequuntur sequi, quod neque. Commodi, nulla.</p>
    </div>
  </div>

  <div id="RightPanel">
    <p>Some Text</p>
    <div id="RightBox">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos impedit, nesciunt placeat, quasi alias repudiandae obcaecati repellendus maiores, distinctio dicta, soluta voluptatibus laboriosam deleniti dolores eum! Blanditiis hic dolore in placeat architecto exercitationem, voluptatem sed consequuntur soluta corporis repellat enim, eius sint. Minus dolorem eveniet quia enim officia necessitatibus. Id blanditiis velit nesciunt culpa nihil veniam, possimus, provident quisquam a, illo veritatis maxime minus corporis temporibus in tempore mollitia quia cumque dolorum inventore optio officia, consequuntur quas. Labore accusamus consectetur ullam sit error, aspernatur nihil nostrum, temporibus veniam deleniti minima ipsum. Repudiandae, nemo maxime consectetur! Debitis mollitia nostrum laborum, quia.</p>
    </div>
  </div>


</div>

＆＃13;

＆＃13;

＆＃13;

Codepen Demo

注意：我使用了高度auto，但如果需要固定高度，则可以使用相应的overflow进行调整。

Browser support

CSS-Tricks: Guide to Flexbox

Answer 2

试试这个：
一个简单的JavaScript解决方案：
1.在左侧，放置Office＆amp;目标，在父div元素中。
2.获取这个新的左父div元素的高度 3.将此高度设置为右侧文本框。

divRight.style.height = divLeft.clientHeight + 'px';

4。由于它们的尺寸相同，因此底部对齐

示例示例JSFiddle位于：https://jsfiddle.net/hcx2wepd/1/

祝你好运。