0
我有一个2页相邻的HTML页面。每次我在一列中的文字少时，其高度就会变小。使HTML列保持相同大小
无论列中有什么内容，我都希望列的高度保持不变。请注意我将有超过2列。当我添加更多的列时，列将在下面显示。
这是我到目前为止有：
HTML
<div class="col-sm-6">
<div class="services-post services-single-post">
<div class="single-post-title">
<h2> Music Production </h2>
</div>
<div class="single-post-image">
<img src="img/music.jpg" alt="Post Title">
</div>
<div class="single-post-info">
</div>
<div class="single-post-content">
<p>We also offer music production. We have been making music for over 10 years using industry standard software and equipment. If you are looking for the best you've come to the right place. </p>
<a href="services-post.html" class="btn">Read more</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="services-post services-single-post">
<div class="single-post-title">
<h2>Graphic design</h2>
</div>
<div class="single-post-image">
<img src="img/s4.jpg" alt="Post Title">
</div>
<div class="single-post-info">
</div>
<div class="single-post-content">
<p>
Graphic design solutions</p>
<a href="services-post.html" class="btn">Read more</a>
</div>
</div>
</div>
CSS
.services-post {
background: #FFF;
position: relative;
margin: 20px 0;
border: 1px solid #EEE;
}
.services-post img {
max-width: 100%;
}
.services-post .post-info {
background: #000;
background: rgba(0, 0, 0, 0.6);
color: #FFF;
line-height: 1.2;
position: absolute;
padding: 5px;
left: 10px;
top: 10px;
-webkit-border-radius: 5px;
-webkit-background-clip: padding-box;
-moz-border-radius: 5px;
-moz-background-clip: padding;
border-radius: 5px;
background-clip: padding-box;
}
.services-post .post-comments-count {
text-align: center;
}
.post-info .post-comments-count i {
margin-right: 5px;
}
.post-info .post-comments-count a {
color: #FFF;
}
.post-info .post-date .date {
font-size: 0.7em;
font-weight: 600;
}
.post-title h3 {
font-size: 1.2em;
border-bottom: 1px dotted #828282;
margin: 0 20px;
padding-top: 10px;
}
.post-title h3 a {
color: #535b60;
}
.post-summary {
margin: 10px 20px;
}
.post-summary p {
color: #828282;
font-size: 0.9em;
text-align: justify;
}
.post-more {
text-align: right;
padding: 0 20px 20px 0;
}
/* Single Post */
.services-single-post {
padding: 10px 30px;
}
.single-post-title h2 {
font-size: 36px;
margin: 0 0 10px 0;
border-bottom: 1px dotted #828282;
}
.single-post-info {
margin: 20px 0;
padding-bottom: 10px;
border-bottom: 1px dotted #828282;
}
.single-post-info i {
color: #333;
margin-right: 5px;
}
.single-post-image {
text-align: center;
}
.single-post-image img {
border:none;
}
.single-post-content {
margin: 30px 0 20px 0;
padding-bottom: 20px;
border-bottom: 2px dotted #CCC;
}
.single-post-content p {
color: #828282;
font-size: 0.9em;
text-align: justify;
}
的可能的复制[在自举高度相等的列3]（http://stackoverflow.com/questions/28484089/equal-height-columns-in-bootstrap-3） – APAD1