html - 如何在一行列中对齐按钮
问题描述
我有一排由图像、文本和按钮组成的列。我怎样才能让每列底部的按钮看起来对齐。
我尝试了各种 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>
解决方案
尝试这个:
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;
}
推荐阅读
- python - 在scrapy中达到多次下载后如何限制蜘蛛爬虫停止?
- c - 如何使用 memcpy 从具有双指针的连续位置访问值
- python - Tkinter 键盘覆盖以写入其他窗口(例如,在谷歌搜索栏中输入)
- python - 我可以在 Django 通用 ListCreateAPIView 中指定 HTTP 方法吗?
- javascript - HTML Overlay 透传屏幕实现
- c# - Visual Studio 2019 中的“无法加载文件或程序集 'Oracle.DataAccess'”错误
- powershell - 使用 PowerShell 删除文件名部分
- winforms - Windows 窗体在从工作线程更新 UI 线程中的 DataGridView 时崩溃,同时继续垂直滚动
- c++ - SDL2:无法创建窗口:没有可用的视频设备
- asynchronous - 顺序启动任务,但异步