作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我正在使用 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>
关于css - flex 属性与按钮高度混淆?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35223471/
我是一名优秀的程序员,十分优秀!