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