html – Flexbox与底部对齐

发布时间：2020-12-14 23:28:14 所属栏目：资源来源：网络整理

导读：我有以下布局 http://jsbin.com/joyetaqase/1/edit?html,output div class="row" div class="col" h2Lorem Ipsum is simply dummy text of the printing and typesetting industry./h2 pmy footer/p /div div class="col" h2Lorem Ipsum./h2 pmy footer/p /d

我有以下布局 http://jsbin.com/joyetaqase/1/edit?html,output

<div class="row">

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

     <div class="col">
      <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 class="row">
    
    
    <div class="col">
      <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
      <p>my footer</p>
    </div>
    
     <div class="col">
      <h2>Lorem Ipsum.</h2>
      <p>my footer</p>
    </div>
    
    
  </div>

Updated JSBin

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!