我一直在试图将我的按钮对齐在相同的高度上，以便当文本将其中一个按下时都下降。我的首选解决方案似乎不起作用。
请查看我的代码：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Placeholder</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test.css">
<style type="text/css"></style>
</head>
<body>
<div class="container-groei">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
<div class="med-linebreak"></div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement texttextJust some placement text
Just some placement textJustlacement text</p> <br>
<div class="med-linebreak"></div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
<div class="med-linebreak"></div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
<div class="med-linebreak"></div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement</p> <br>
<div class="med-linebreak"></div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
<div class="med-linebreak"></div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.container-groei {
max-width: 1600px;
display: block;
overflow: auto;
margin: 0 auto;
padding-top: 150px;
border-top: 1px solid rgba(0,0,0,0.10);
border-left: 1px solid rgba(0,0,0,0.10);
border-right: 1px solid rgba(0,0,0,0.10);
}
.container-groei-section {
min-height: 550px;
margin: 0 auto;
}
.container-groei-section p {
font-size: 16px;
max-width: 500px;
margin: 0 auto;
}
.container-groei-section h2 {
color: #0E8DBD;
padding-bottom: 20px;
font-size: 20px;
text-transform: uppercase;
text-align: center;
}
.button-placement-groei {
max-width: 500px;
margin: 0 auto;
}
.read-more-button {
background: #00aeef;
border-radius: 11px;
}
.read-more-button-text {
font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
color: #FFF;
font-size: 21px;
text-align: center;
padding: 5px 10px;
}
我可能用CSS搞砸了一些东西，但似乎无法弄清楚什么。我正在寻找的是，要使按钮随时保持在相同的高度，因此按钮和段落之间包含比其他单词少的单词之间的空白。一个简单的解决方案是使段落达到最大高度，但这只是造成更多问题。
谢谢您的时间。
正如我在评论中提到的那样，如果您想实现的目标是同一级别的内容对齐，则应使用CSS网格而不是Bootstrap的固定列网格系统。但是，这是您的代码的修复程序，您要做的就是从容器 - 格罗伊部分中取出按钮并调整部分的高度。
但是，如果您希望您的按钮组在该部分内，则需要为按钮使用绝对定位，这是实现此目的的唯一另一种方法。但是我仍然建议您结帐CSS网格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Placeholder</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test.css">
<style type="text/css">
.container-groei {
max-width: 1600px;
display: block;
overflow: auto;
margin: 0 auto;
padding-top: 150px;
border-top: 1px solid rgba(0,0,0,0.10);
border-left: 1px solid rgba(0,0,0,0.10);
border-right: 1px solid rgba(0,0,0,0.10);
}
.container-groei-section {
min-height: 400px;
margin: 0 auto;
}
.container-groei-section p {
font-size: 16px;
max-width: 500px;
margin: 0 auto;
}
.container-groei-section h2 {
color: #0E8DBD;
padding-bottom: px;
font-size: 20px;
text-transform: uppercase;
text-align: center;
}
.button-placement-groei {
max-width: 500px;
margin: 0 auto;
}
.read-more-button {
background: #00aeef;
border-radius: 11px;
}
.read-more-button-text {
font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
color: #FFF;
font-size: 21px;
text-align: center;
padding: 5px 10px;
}
</style>
</head>
<body>
<div class="container-groei">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
<div class="med-linebreak"></div>
</div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement texttextJust some placement text
Just some placement textJustlacement text</p> <br>
<div class="med-linebreak"></div>
</div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
<div class="med-linebreak"></div>
</div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
<div class="med-linebreak"></div>
</div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement</p> <br>
<div class="med-linebreak"></div>
</div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="container-groei-section">
<h2>Placement</h2>
<p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
<div class="med-linebreak"></div>
</div>
<div class="button-placement-groei">
<a href="#">
<div class="read-more-button">
<div class="read-more-button-text">Read more</div>
</div></a>
</div>
</div>
</div>
</body>
</html>