Question

我得到了一个有4列需要高度相同的设计。仅此一点并不是那么糟糕，我觉得我已经能够使用引用here的One True Layout方法来解决这个问题：

<style>
    .row {
        overflow: hidden;
    }

    .block {
        margin-bottom: -99999px;
        padding-bottom: 99999px;
    }
</style>  


<div class="row">
    <div class="block">
        <div class="content">
            Content goes here, and each .block element should have the same height.
        </div>
    </div>
    <div class="block">
        <div class="content">
            Content goes here, and each .block element should have the same height.
        </div>
    </div>
    ...
</div>

然而，它变得复杂的是这些列内部各有3行，我需要这些行中的每一行与它们的表兄弟相等。即。所有的A div都需要相等的高度，所有的B都等于最大的B等等。

 ------------   ------------   ------------   ------------
|            | |            |  |           |  |           |
|     A1     | |     A2     |  |     A3    |  |     A4    |
|            | |            |  |           |  |           |
 ------------   ------------   ------------   ------------
|            | |            |  |           |  |           |
|            | |            |  |           |  |           |
|     B1     | |     B2     |  |     B3    |  |     B4    |
|            | |            |  |           |  |           |
|            | |            |  |           |  |           |
 ------------   ------------   ------------   ------------
|     C1     | |     C2     |  |     C3    |  |     C4    |
|            | |            |  |           |  |           |
 ------------   ------------   ------------   ------------

每个块内的内容只是文本或无序列表。

我发现如果我将所有的As，B和C一起用它们各自的块包装在一起，我可以做到这一点，但是后来我找不到解决方案来做这个在缩小断点时做出响应。所有As首先堆叠在一起，然后是Bs，然后是Cs，当我正在寻找的是所有列保持在一起时，堆叠为A1，B1，C1，A2，B2， C2等。

我也尝试过使用偏移列，并使用bootstrap push和pull类重新排序它们，但没有任何效果。

我们还需要为此站点支持IE9，因此不幸的是，flexbox已经出局了。

上图是大视口应显示的内容，每列从引导网格中取出3列。小视口应该分别下降到2x2,6列，而超小视频只能将它们叠加在另一个上面，占据整个12列。

编辑：我更喜欢纯粹的CSS解决方案，如果可能的话，不使用表格。但是，我并没有反对它，也没有排除Javascript。

Answer 1

虽然这可能需要更多工作，但您可以将它们定义为三个单独的列，所有列都在一行内。例如：

    <div class="row">
   <div class="col-xs-12 col-sm-4">
      <div class="row A">
         <div class="col-xs-12">
         A1
         </div>
      </div>
      <div class="row B">
         <div class="col-xs-12">
         B1
         </div>
      </div>
      <div class="row C">
         <div class="col-xs-12">
         C1
         </div>
      </div>
   </div>
   <div class="col-xs-12 col-sm-4">
      <div class="row A">
         <div class="col-xs-12">
         A2
         </div>
      </div>
      <div class="row B">
         <div class="col-xs-12">
         B2
         </div>
      </div>
      <div class="row C">
         <div class="col-xs-12">
         C2
         </div>
      </div>
   </div>
   <div class="col-xs-12 col-sm-4">
      <div class="row A">
         <div class="col-xs-12">
         A3
         </div>
      </div>
      <div class="row B">
         <div class="col-xs-12">
         B3
         </div>
      </div>
      <div class="row C">
         <div class="col-xs-12">
         C3
         </div>
      </div>
   </div>
</div>

以下css：

.A{
    height:50px;
}
.B{
    height:90px;

}
.C{
    height:40px;
}

Here is a jsfiddle to show you what I'm trying to do.如果您正在寻找，请告诉我。

Here is a jsfiddle with JQuery that should solve your problem.

Bootstrap在相等高度列

1 个答案: