我有一个三列的flexbox。在每列中，我想要一个按钮将自己锚定在列的最左下角。经过大量的研究和反复试验，我似乎无法实现这一点 - 当在不同的屏幕宽度下观看时，按钮总是向上或向下移动。我已经尝试在文本部分中添加按钮，并在列中设置了自己的div。在所有屏幕宽度上，列保持相同的高度非常重要，这已通过下面的CSS实现。任何人都可以帮忙解决这个问题吗？
.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.flexbox .col {
flex: 1;
margin: 10px;
}
.flexbox_colbutton {
flex: 1;
background: #fff;
align-items: flex-end;
display: flex;
justify-content: left;
}
.flexbox .col:nth-child(1) {
background: #fff;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.flexbox .col:nth-child(2) {
background: #fff;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.flexbox .col:nth-child(3) {
background: #fff;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.flexbox .col:nth-child(4) {
background: #fff;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
@media (max-width: 480px) {
.flexbox col {
max-width: 98%;
}
.flexbox {
flex-direction: column;
}<div class="flexbox">
<div class="col">
<br>
<h5><center><strong>recent testimonial</strong></center></h5>
<p class="text-justify w3-padding">..DREW performed very well from the outset. When we had to value-engineer the project to bring it within budget they were extremely helpful with advice and assistance. The Site Manager was courteous and informative, and throughout performance levels were excellent."<br><br>
<i>Mark Holloway, Countryside Operations Manager, Bournemouth Borough Council<br>
[Hengistbury Head Visitor Centre]</i></p>
<br><br>
<div class="flexbox_colbutton">
<button class="w3-btn w3-red w3-medium" href="#">view project</button>
</div>
</div>
<div class="col">
<br>
<h5><center><strong>WHY OUR CLIENTS CHOOSE DREW</strong></center></h5>
<p class="text-justify text-left w3-padding">
✔ our clients are our first priority <br>✔ triple badge ISO accreditation <br>✔ highly experienced Director-led project teams<br>
✔ collaborative working approach to project delivery<br>
✔ extensive in-house technical expertise <br>✔ financially stable and long-established Company <br>
✔ excellent record on health, safety and the environment</p><br>
<br>
<div class="flexbox_colbutton">
<button class="w3-btn w3-red w3-medium" href="#">read more</button>
</div>
</div>
<div class="col">
<br>
<h5><center><strong>recent testimonial</strong></center></h5>
<p class="text-justify w3-padding">"..The scheme was delivered to budget and, although a challenging design, is of the highest quality. During construction DREW worked to ensure it responded with practical solutions to some challenging requirements .. I would certainly recommend them for future projects."<br><br>
<i>David Morris, Sweett (UK)<br>[St George's Primary School]</i></p><br>
<br><br>
<div class="flexbox_colbutton">
<button class="w3-btn w3-red w3-medium" href="#">view project</button>
</div>
</div>
</div>
答案 0 :(得分：0)
我建议也使用flexbox作为列：
.flexbox .col {
display: flex;
flex-direction: column;
}
现在我们可以让<p>标记占用所有剩余空间，有效地将按钮推到列的底部。
.col p {
flex: 1;
}
注意：如果您将其他内容添加为.col的直接子项（例如<ul>），则您还必须为其设置flex: 1。该按钮必须不具有弹性增长设置，因此请从flex: 1;中删除该行.flexbox_colbutton。
您可以在下面找到整个编辑过的示例。在我的测试中，按钮始终位于底部边缘，页面表现得像我想的那样。
.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.flexbox .col {
flex: 1;
margin: 10px;
display: flex;
flex-direction: column;
}
.col p {
flex: 1;
}
.flexbox_colbutton {
background: #fff;
display: flex;
}
.flexbox .col:nth-child(1) {
background: #fff;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.flexbox .col:nth-child(2) {
background: #fff;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.flexbox .col:nth-child(3) {
background: #fff;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.flexbox .col:nth-child(4) {
background: #fff;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
@media (max-width: 480px) {
.flexbox col {
max-width: 98%;
}
.flexbox {
flex-direction: column;
} <div class="flexbox">
<div class="col">
<br>
<h5><center><strong>recent testimonial</strong></center></h5>
<p class="text-justify w3-padding">..DREW performed very well from the outset. When we had to value-engineer the project to bring it within budget they were extremely helpful with advice and assistance. The Site Manager was courteous and informative, and throughout performance levels were excellent."<br><br>
<i>Mark Holloway, Countryside Operations Manager, Bournemouth Borough Council<br>
[Hengistbury Head Visitor Centre]</i></p>
<br><br>
<div class="flexbox_colbutton">
<button class="w3-btn w3-red w3-medium" href="#">view project</button>
</div>
</div>
<div class="col">
<br>
<h5><center><strong>WHY OUR CLIENTS CHOOSE DREW</strong></center></h5>
<p class="text-justify text-left w3-padding">
✔ our clients are our first priority <br>✔ triple badge ISO accreditation <br>✔ highly experienced Director-led project teams<br>
✔ collaborative working approach to project delivery<br>
✔ extensive in-house technical expertise <br>✔ financially stable and long-established Company <br>
✔ excellent record on health, safety and the environment</p><br>
<br>
<div class="flexbox_colbutton">
<button class="w3-btn w3-red w3-medium" href="#">read more</button>
</div>
</div>
<div class="col">
<br>
<h5><center><strong>recent testimonial</strong></center></h5>
<p class="text-justify w3-padding">"..The scheme was delivered to budget and, although a challenging design, is of the highest quality. During construction DREW worked to ensure it responded with practical solutions to some challenging requirements .. I would certainly recommend them for future projects."<br><br>
<i>David Morris, Sweett (UK)<br>[St George's Primary School]</i></p><br>
<br><br>
<div class="flexbox_colbutton">
<button class="w3-btn w3-red w3-medium" href="#">view project</button>
</div>
</div>
</div>