HTML – flex属性混乱按钮高度?
发布时间:2021-01-01 03:02:21 所属栏目:资源 来源:网络整理
导读:我正在使用bootstrap并使用flex进行布局. 目前按钮正在占据容器的高度.文本下面有很多空间,我想删除i,当我向按钮添加填充时,它的大小会变得不均匀.我试图通过线高调整大小,但我试图找到实际的解决方案和原因,为什么我有这个问题. 我在这里缺少任何与flex相关
我正在使用bootstrap并使用flex进行布局. 目前按钮正在占据容器的高度.文本下面有很多空间,我想删除i,当我向按钮添加填充时,它的大小会变得不均匀.我试图通过线高调整大小,但我试图找到实际的解决方案和原因,为什么我有这个问题. 我在这里缺少任何与flex相关的东西,还是其他东西? .vessel-card { display: flex; flex-direction: column; } .vessel-card h3 { margin: 0; padding: 20px 0; } .departure-card { display: flex; padding: 20px 0; border-top: 2px solid #888; } .departure-card p { margin-right: 10px; } .departure-card:last-child { border-bottom: 2px solid #888; } .departure-card .btn-explore { border: 1px solid #000; display: inline-block; text-transform: uppercase; color: #000; border-radius: 0; } <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-md-4 vessel-card"> <a href="cienfuegos-from-havana.html" class="special-departure"> <img src="http://placehold.it/350x150"> </a> <h3>Vessel: Panorama</h3> <div class="departure-card"> <p>Havana to Cienfuegos starting at $5,999</p> <a href="#" class="btn btn-explore">Explore</a> </div> <div class="departure-card"> <p>Havana to Cienfuegos starting at $5,999</p> <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</a> </div> </div> </div> </div> 解决方法Flexbox使物品的高度与您在此处看到的相同Demo ,但您可以使用
align-items 来更改它或在您的情况下
Demo
.parent { align-items: center; display: flex; } .child { border: 1px solid black; margin: 5px; } .child:first-child { height: 100px; } <div class="parent"> <div class="child">Child</div> <div class="child">Child</div> </div> (编辑:好传媒网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |