Question

我有两列，第一列有图像，第二列是文章。这篇文章有很多＆＃34;空格＆＃34;我希望文章的高度与图像的高度相同，因此没有可见的空白区域。

<article>
  <div class="row">
    <div class="row-sm-height">
      <aside class="col-sm-6 ">
        <img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200" />
      </aside>
      <aside class="col-sm-6">
        <div>
          <span> <a href="http://www.sooziq.com/category/miscellaneous/" id="A_1">Basketball</a></span>
          <h2 id="H2_2">
                                <a href="http://www.sooziq.com/22045/he-colored-his-phones-camera-the-reason-why-will-amaze-you/" rel="bookmark" id="A_2">What really Matters</a>
                            </h2>
          <span id="SPAN_2">November 12, 2015</span>
          <p>
        Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! <a href="http://www.sooziq.com/22045/he-colored-his-phones-camera-the-reason-why-will-amaze-you/" id="A_3">Read More</a>
          </p>
        </div>
      </aside>
    </div>
  </div>
</article>

演示

http://codepen.io/anon/pen/WQVxor

我希望它也能做出回应，我可以通过反复试验获得匹配的高度，但我不认为这是正确的方法。

Answer 1

在您的情况下，最简单也可能是最佳解决方案是使2列'父div 具有相同的背景颜色，因为2列这样做看起来文章栏已经扩展。

在你的css中，找到.row-sm-height下的@media (min-width: 768px)并添加背景颜色：

.row-sm-height {
    display:table-row;
    background: #f7f7f7;
}

你只需要不要指定任何高度。它只是调整到你的图像高度。

Answer 2

假设您的图像与同一设备的尺寸相同，则可以设置最小高度。

将新类添加到作为文章的div中（而不是使用＆＃34; col-x＆＃34;）。将类设置为具有Npx的最小高度。

作为CSS的示例：

div.image-article {
    min-height: 250px;   
}

如果使其响应，您可能会在不同设备上缩小图像。使用媒体查询。

div.image-article {
@media (min-width: 0) {
    min-height: 250px;
}
@media (min-width: @screen-xs-min) {
    min-height: 250px;
}
@media (min-width: @screen-sm-min) {
    min-height: 275px;
}
@media (min-width: @screen-md-min) {
    min-height: 290px;
}
@media (min-width: @screen-lg-min) {
    min-height: 320px;
}
}

如何使两个具有相同高度长度的列

2 个答案: