使HTML列保持相同的大小

Question

我有一个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;
}

Answer 1

你可以使用bootstrap 4开箱即用，因为它集成了flexbox，但你也可以使用bootstrap 3。

我在一行中添加了一个名为.equal-height { display: flex; }的类，其中包含您希望等宽的列，然后添加height: 100%，然后将.services-post添加到.services-post { background: #FFF; position: relative; margin: 20px 0; border: 1px solid #EEE; height: 100%; } .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; } .equal-height { display: flex; }，以便边框将延伸到列的底部。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row equal-height">
    <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>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

无法看到你的额外标记，但这看起来像Bootstrap。网格系统列需要嵌套在一个元素内，该元素的类标有＆＃34; row＆＃34;：

<div class="row">
    <div class="col-sm-6"> content</div>
    <div class="col-sm-6"> more content</div>
</div>

你的HTML有这个吗？

Answer 3

您可以输入您需要的确切像素数量，使表格行的最小高度成为静态。尝试将以下内容添加到css并在html中实施相关课程。

.tableHeight{
    min-height: 20px;
}