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;
  }
}

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

对此将提供任何帮助！

Answer 1

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

完成此操作后，可以对列中的所有元素（标题，段落，按钮等）使用绝对定位，以便它们全部对齐。如果您不太熟悉绝对定位和一般的position属性，那么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 。

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

2 个答案: