html – Flexbox与底部对齐

概述我有以下布局 http://jsbin.com/joyetaqase/1/edit?html,css,output <div class="row"> <div class="col"> <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2> <p>my 我有以下布局 http://jsbin.com/joyetaqase/1/edit?html,output

<div >    <div >      <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>      <p>my footer</p>    </div>     <div >      <h2>Lorem Ipsum.</h2>      <p>my footer</p>    </div>  </div>

使用flexBox我试图为.col div设置相同的高度和相同的宽度.

我的问题是：我怎样才能把< p>坚持在盒子的底部？

布局应如下所示：

我知道我可以制作< p>绝对和使用底部：0;但是我想用flexBox实现这个目标,有可能吗？

谁能解释一下？

解决方法 你可以采取以下方式.给出显示：flex;弯曲方向：柱;至
.col和flex：1 0 auto;到h2

.row {  wIDth: 500px;  Font-family: monospace;  display:flex;}.col {  wIDth: 50%;  border: 1px solID #000;  padding: 10px;  Box-sizing: border-Box;  display: flex;    flex-direction: column;}h2,p {  Font-weight: normal;  margin: 0;}h2 {    flex: 1 0 auto;}

<div >            <div >      <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>      <p>my footer</p>    </div>         <div >      <h2>Lorem Ipsum.</h2>      <p>my footer</p>    </div>          </div>

Updated JSBin

总结

以上是内存溢出为你收集整理的html – Flexbox与底部对齐全部内容，希望文章能够帮你解决html – Flexbox与底部对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。