我正在使用响应式弹性网格布局，每个＆＃34;框＆＃34;包含文字和按钮;盒子都是同一个高度。我试图让按钮在盒子底部对齐（识别边距和填充）并相互对齐。
---------- ---------- ---------- | text | | text | | text | | | | text | | text | | | | | | text | | | | | | | | button | | button | | button | buttons aligned with each other at bottom of box ---------- ---------- ----------
.container {
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: 1170px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
flex: 1 1 8%;
margin: 0;
padding: 0 0 0 1em;
box-sizing: border-box;
}
.col:first-child { padding-left: 0; }
.col:last-child { padding-right: 0; }
.col-span-1 {
flex-basis: 8.3333%;
}
article {
height:100%;
border:1px solid black;
padding:1em;
}
a.quickbutton {
color: #afafaf;
background-color: #fafafa;
background-image: none;
border: 0 none;
border-radius: 4px;
cursor: pointer;
display: block;
font-size: larger;
font-weight: 500;
margin-bottom: 4px;
padding: 1.5em;
text-align: center;
text-transform: uppercase;
white-space: normal;
max-width: 100%;
text-decoration:none;
}
a.quickbutton:hover {
background-color: #afafaf;
color: #fafafa;
text-decoration: none;
}
.bottom {
/*--------------------------------*/
/* THIS IS WHERE I NEED SOMETHING */
/*--------------------------------*/
/* vertical-align: bottom; doesn't work */
/* position:relative: bottom:0px; doesn't work */
}
@media only screen and (max-width: 48em) {
.col-span-1
{
flex-basis: 100%;
padding:0;
}
}<div class="container">
<div class="row">
<div class="col col-span-1">
<article>
<h2>Article 1</h2>
<p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p>
<a href="#" class="quickbutton bottom">Button 1</a>
</article>
</div><!-- col -->
<div class="col col-span-1">
<article>
<h2>Article 2</h2>
<p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p>
<p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p>
<a href="#" class="quickbutton bottom">Button 2</a>
</article>
</div><!-- col -->
<div class="col col-span-1">
<article>
<h2>Article 3</h2>
<p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p>
<p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p>
<p>Ei has movet liberavisse. Sed errem ridens singulis te, mea liber homero doctus te, ne oratio aliquip antiopam vis. In graecis incorrupte accommodare nam. No pri malorum euismod dissentiet, vix ut ludus sententiae intellegebat. Esse labitur voluptatibus sed no, posidonium temporibus an nec.</p>
<a href="#" class="quickbutton bottom">Button 3</a>
</article>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
当然，当在移动设备或小屏幕上观看时，这些框应该“崩溃”。达到他们所需的最小尺寸。
我非常感谢帮助实现这一目标，因为它一直在疯狂！如果有任何其他改进，我愿意学习更多。
TIA
答案 0 :(得分：0)
请参阅下面代码段中的解决方案
.container {
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: 1170px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
flex: 1 1 8%;
margin: 0;
padding: 0 0 0 1em;
box-sizing: border-box;
}
.col:first-child { padding-left: 0; }
.col:last-child { padding-right: 0; }
.col-span-1 {
flex-basis: 8.3333%;
}
article {
height: calc(100% - 100px - 2em);
border:1px solid black;
padding: 1em 1em calc(1em + 100px) 1em;
position: relative;
}
a.quickbutton {
color: #afafaf;
background-color: #fafafa;
background-image: none;
border: 0 none;
border-radius: 4px;
cursor: pointer;
display: block;
font-size: larger;
font-weight: 500;
margin-bottom: 4px;
padding: 1.5em;
text-align: center;
text-transform: uppercase;
white-space: normal;
max-width: 100%;
text-decoration:none;
}
a.quickbutton:hover {
background-color: #afafaf;
color: #fafafa;
text-decoration: none;
}
.bottom {
position:absolute;
bottom:1em;
height: 100px;
width: calc(100% - 2em);
}
@media only screen and (max-width: 48em) {
.col-span-1
{
flex-basis: 100%;
padding:0;
}
}<html>
<head>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-span-1">
<article>
<h2>Article 1</h2>
<p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p>
<div class="bottom"><a href="#" class="quickbutton">Button 1</a></div>
</article>
</div><!-- col -->
<div class="col col-span-1">
<article>
<h2>Article 2</h2>
<p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p>
<p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p>
<div class="bottom"><a href="#" class="quickbutton">Button 2</a></div>
</article>
</div><!-- col -->
<div class="col col-span-1">
<article>
<h2>Article 3</h2>
<p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p>
<p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p>
<p>Ei has movet liberavisse. Sed errem ridens singulis te, mea liber homero doctus te, ne oratio aliquip antiopam vis. In graecis incorrupte accommodare nam. No pri malorum euismod dissentiet, vix ut ludus sententiae intellegebat. Esse labitur voluptatibus sed no, posidonium temporibus an nec.</p>
<div class="bottom"><a href="#" class="quickbutton">Button 3</a></div>
</article>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</body>
</html>