响应列所有相同的高度与标题，段落，按钮都相同的高度

Question

我正在努力实现响应列。目前所有列的高度都不相同。当屏幕变小时，段落不是同一级别，无论屏幕大小如何，我都试图使它们处于同一级别。我的下一个问题是按钮在所有列中也不会是同一级别。

贝娄目前是我的HTML：

<div class="container">
  <div class="section">
  <a href="#"><img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /></a>
  <h2>test heading text</h2 >
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <a href="" class="button">Learn more</a>
  </div>

  <div class="section">
  <a href="#"><img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /></a>  <h2>Fencing and Gates</h2>
  <h2>test heading text long</h2 >
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. Maecenas id leo at elit vestibulum sagittis at in ex. Cras vulputate laoreet dictum. Vestibulum nec quam placerat, blandit orci in, hendrerit ante. </p>
  <a href="" class="button">Learn more</a>
  </div>

  <div class="section">
  <a href="#"><img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /></a>
  <h2>test heading text longer </h2 >
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
  <a href="" class="button">Learn more</a>
  </div>

  <div class="section">
  <a href="#"><img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /></a>
  <h2>test heading text longer longer </h2 >
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
  <a href="" class="button">Learn more</a>
  </div>

  <div class="section">
  <a href="#"><img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /></a>
  <h2>test heading text</h2 >
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
  <a href="" class="button">Learn more</a>
  </div>

  <div class="section">
  <a href="#"><img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /></a>
  <h2>Block Paved Driveways and Paths</h2>
  <h2>test heading text</h2 >
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. Maecenas id leo at elit vestibulum sagittis at in ex. Cras vulputate laoreet dictum. Vestibulum nec quam placerat, blandit orci in, hendrerit ante. </p>
  <a href="" class="button">Learn more</a>
  </div>

  <div class="section">
  <a href="#"><img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /></a>
  <h2>test heading text</h2 >
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
  <a href="" class="button">Learn more</a>
  </div>

  <div class="section">
  <a href="#"><img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /></a>
  <h2>test heading text</h2 >
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
  <a href="" class="button">Learn more</a>
  </div>

  <div class="section">
  <a href="#"><img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /></a>
  <h2>test heading text</h2 >
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
  <a href="" class="button">Learn more</a> 
  </div>
</div>

以下是我的CSS：

.container:after { /*clear float*/
  content: "";
  display: table;
    width: 100%;
  clear: both;
}

.container {
margin-left: 100px;
    margin-right: 100px;
text-align: center;
padding-top: 30px;
}

.section {
  float: left;
  width: 33.3333%;
  padding-bottom: 50px;
    border: 1px solid;
  box-sizing: border-box;
  display: table-cell;
}

.section p {
padding-bottom: 50px;
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
padding-left: 25px;
padding-right: 25px;

}

.section h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
}

@media (max-width: 768px) {
  .section {
    float: none;
    width: auto;
  }
}

下面是我目前有https://jsfiddle.net/b147rmdh/的js小提琴

任何有关这方面的帮助将不胜感激！

Answer 1

您需要为每个列指定高度，使它们都具有相同的高度。如果不这样，那么列将根据它们包含的内容量（当前代码中发生的内容）来自行调整大小。更具体地说，与您的代码相关，如果您为.section类添加特定高度，则所有列应该是相同的高度。

完成此操作后，您可以对列中的所有元素（标题，段落，按钮等）使用绝对定位，以便它们都排成一行。如果您对绝对定位和位置属性一般不太熟悉，here is a great reference可以很好地解释定位。绝对建议给它一个阅读并花时间去理解定位，因为它是最基本的CSS技能之一。

Answer 2

我建议带有包装的Flexbox。

.container {
  display: flex;
  flex-wrap: wrap;
}

.section {
  width: 33.3333%;
}

完成后，如果将上层内容包装在一个元素中并保持按钮分开，则可以垂直使用类似的方法。将flex-direction设置为column，将justify-content设置为space-between。