html–Flexbox与底部对齐

html–Flexbox与底部对齐,第1张

概述我有以下布局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 ty

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

使用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;}
 

Updated JSBin 总结

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

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1118514.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)