我有一张卡片,上面有文字,图片和联系按钮。无论每张卡中有多少文本,我都需要使按钮浮到卡的底部,以便所有卡的底部都具有统一的接触按钮。
邮政编码:
.column.is-one-third
.card
img(src='../images/results.png', class="teamImage")
.h3.is-3.title John Doe
.p.title Director
.p Synth polaroid bitters chillwave pickled. Vegan disrupt tousled,
|Portland keffiyeh aesthetic food truck sriracha cornhole singleorigin
|coffee church-key roof party. Leggings ethical
|McSweeney's, normcore you probably haven't heard of them
|Marfa organic squid.
.button Contact
css:
.card {
background-color: white;
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10,
10, 0.1);
color: #404040;
max-width: 100%;
text-align: justify;
position: relative; }
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(5, 71, 168);
text-align: center;
cursor: pointer;
width: 100%;
}
答案 0 :(得分:2)
Flexbox可以做到这一点。
.card {
display:flex;
flex-direction:column;
}
.button {
margin-top:auto;
}
.card {
width:33%;
margin:auto;
display: flex;
flex-direction: column;
height:90vh;
border:1px solid red;
}
.button {
margin-top: auto;
}
<div class="card">
<h2>Title</h2>
<h3>Name</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, voluptatum?</p>
<button class="button">button</button>
</div>