我有一排列,其中包含一个图像,一些文本和一个按钮。如何使每列底部的按钮看起来对齐。
我尝试了各种flex box方法,例如flex-end,但是与其他内容对齐方式混在一起。我还使用了相对位置作为父级,位置绝对底部为0。问题在于它与可能包含不同长度文本的同级段落标记冲突。
范例图片
!(https://www.dropbox.com/s/9e27ehcnqdsyx89/Screen%20Shot%202019-01-19%20at%2012.26.03%20PM.png?dl=0)
<div class="content" for number of content>
<img
/>
<div class="title">
<h4>Title</h4>
</div>
<div class="body">
<p>Paragraphs of various length</p>
</div>
<a>
<button class="btn btn-default">
CTA
</button>
</a>
</div>
答案 0 :(得分:1)
尝试一下:
HTML
<div class="container">
<div class="item">
<div class="item__image"><img src="https://dummyimage.com/300x300/000/fff" /></div>
<div class="item__content">
<div class="item__title"><h4>Title</h4></div>
<div class="item__body"><p>Paragraphs of various lenthParagraphs of various lengthParagraphs of various length</p></div>
</div>
<div class="item__options">
<button class="btn btn-default">CTA</button>
</div>
</div>
<div class="item">
<div class="item__image"><img src="https://dummyimage.com/300x300/000/fff" /></div>
<div class="item__content">
<div class="item__title"><h4>Title</h4></div>
<div class="item__body"><p>Paragraphs of various lenthParagraphs of various lengthParagraphs of various length</p></div>
</div>
<div class="item__options">
<button class="btn btn-default">CTA</button>
</div>
</div>
<div class="item">
<div class="item__image"><img src="https://dummyimage.com/300x300/000/fff" /></div>
<div class="item__content">
<div class="item__title"><h4>Title</h4></div>
<div class="item__body"><p>Paragraphs of various lenthParagraphs of various lengthParagraphs of various length</p></div>
</div>
<div class="item__options">
<button class="btn btn-default">CTA</button>
</div>
</div>
</div>
CSS
.container {
display: flex;
}
.item {
display: flex;
flex-flow: column;
}
.item:not(last-child) {
margin-right: 10px;
}
.item__image {
}
.item__content {
flex: 2 ;
}
.item__options {
text-align: center;
height: 100px;
}
在此处查看输出:https://jsfiddle.net/2467mgn5/2/