我是flexbox的新手,只是尝试创建一组列,使其宽度/高度与内容最多的列保持相同,而且我似乎已经使该部分正常工作.我的问题是尝试固定按钮以使其与列的底部对齐.
我已经阅读了很多使用margin-bottom来实现此目的的示例,但是它对我不起作用.任何帮助表示赞赏…如您所见,我的技能充其量是最基本的. TIA
.columns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
display: flex;
flex-direction: column;
width: 24%;
border: 1px solid blue;
}
.list {
flex: 1;
padding: 10px;
}
.dir_button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #956a51;
text-align: center;
cursor: pointer;
width: 80%;
}
button.dir_button {
margin-top: auto
}
<div class="columns">
<div class="col">
<div class="list">
List item List itemList itemList item List item<br />
<button type="button" class="dir_button">EMAIL</button>
</div>
</div>
<div class="col">
<div class="list"> List item List item<br> List item<br>
<p> List item</p>
<p>List item </p>
</div>
</div>
<div class="col">
<div class="list"> List item<br> List item<br> List item<br> List item<br>
<p><br>
</p>
</div>
</div>
<div class="col">
<div class="list"> List item List item<br> List item<br> List item<br>
<p><br>
</p>
</div>
</div>
</div>
最佳答案
将列表设为一列flexbox-请注意,沿flex轴的边距对齐(垂直于一列flexbox)仅在flexbox内部有效,即,仅适用于flex项目-请参见下面的演示:
.columns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
display: flex;
flex-direction: column;
width: 24%;
border: 1px solid blue;
}
.list {
flex: 1;
padding: 10px;
display: flex; /* added */
flex-direction: column; /* added */
}
.dir_button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #956a51;
text-align: center;
cursor: pointer;
width: 80%;
}
button.dir_button {
margin-top: auto
}
<div class="columns">
<div class="col">
<div class="list">
List item List itemList itemList item List item<br />
<button type="button" class="dir_button">EMAIL</button>
</div>
</div>
<div class="col">
<div class="list"> List item List item<br> List item<br>
<p> List item</p>
<p>List item </p>
</div>
</div>
<div class="col">
<div class="list"> List item<br> List item<br> List item<br> List item<br>
<p><br>
</p>
</div>
</div>
<div class="col">
<div class="list"> List item List item<br> List item<br> List item<br>
<p><br>
</p>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。