如何实现三个同行div自适应内容高度且保持高度一致？
有三个div居中于页面，每一个结构如下。
<div>
<img>
<p>
<div>
纯css方案。总结：
@dolymood 的方法：为父元素设置 overflow：hidden。再为子元素设置大的 padding-bottom 属性，再用稍大一点的 margin-bottom 属性抵消；
@pantao @MockingBird 的方法采用了table布局，父元素 display：table，子元素 display：table-ceil；
展开
收起
1
条回答
写回答
写回答
-
关键点：display:table
直接将下面的代码粘贴至一个 html 文件即可，图片如果打开慢的话，可以换成本地的即可。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <title>等高布局</title> <style> html { font-size: 10px;; } body { font-size: 1.4rem; } .box { background-color: rgba(200,200,200,0.7); margin: 0 1rem; width: 33.33%; padding: 1rem; } .box:nth-child(2) { height: 5rem; background-color: rgba(200,210,230,0.7); } .accordant { display: table-row; } .table { width: 100%; display: table; } .table .accordant { display: table-row; } .table .accordant .box { display: table-cell; vertical-align: middle; text-align: center; } </style> </head> <body> <div class="table"> <div class="accordant"> <div class="box"> <img src="http://placehold.it/200x200.png" alt="200x200"/> <p>这是一个 Figure</p> </div> <div class="box"> <img src="http://placehold.it/250x250.png" alt="200x200"/> <p>这是一个 Figure</p> </div> <div class="box"> <img src="http://placehold.it/300x300.png" alt="200x200"/> <p>这是一个 Figure</p> </div> </div> </div> </body> </html>2019-07-17 19:17:32赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
