如何将所有列的相同高度作为同一行中的最大列？

Question

示例标记就像这样。所有块都在同一个容器中。

<div class="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

请参阅此处的示例。 http://jsbin.com/remeci/2/edit

在移动设备中，所有列都将相互堆叠

每当同一行中有超过1列时，应具有相同的高度

我知道如果我使用两个。然后我可以解决这个问题，但是根据我目前的要求，我无法做到这一点。因为如果第一行只有2个愿望，那么第3个行将是空白。并且第2行的第1个区块不会跳转到填充该位置

我不想使用Flexbox。

Answer 1

你让我很生气，但你可以像这样改变你的CSS：

.col-md-3 {background:#ccc;outline:1px solid}
.sameheightRow{display:block; width:100%; overflow:hidden}
.sameheightRow .col-sm-3{display:inline-block; float:none; height:100%; margin:0; width:24%; padding:0 0 5000px; margin-bottom:-5000px; vertical-align:top; }

你的HTML只是一个微小的变化（这个行的正确名称，所以我们可以在以后重新使用该行而不会出现任何问题）

<div class="container ">
  <div class="row sameheightRow">
    <div class="col-md-3 col-sm-3 col-xs-3 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsam consequatur voluptatum sapiente doloremque magni voluptates!</div>
    <div class="col-md-3 col-sm-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsam consequatur voluptatum sapiente. Ipsum odio voluptatum porro omnis reprehenderit veritatis vero dignissimos neque maiores ullam quam temporibus doloremque magni voluptates!</div>
        <div class="col-md-3 col-sm-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsam consequatur voluptatum sapiente. Ipsum odio voluptatum porro omnis reprehenderit veritatis vero dignissimos neque maiores ullam quam temporibus doloremque magni voluptates!</div>
        <div class="col-md-3 col-sm-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsam consequatur voluptatum sapiente.!</div>


    <div class="col-md-3 col-sm-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsam consequatur voluptatum sapiente doloremque magni voluptates!</div>
    <div class="col-md-3 col-sm-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsam consequatur voluptatum sapiente. Ipsum odio voluptatum porro omnis reprehenderit veritatis vero dignissimos neque maiores ullam quam temporibus doloremque magni voluptates!</div>
        <div class="col-md-3 col-sm-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsam consequatur voluptatum !</div>
        <div class="col-md-3 col-sm-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsam consequatur voluptatum sapiente. Ipsum odio voluptatum porro omnis reprehenderit veritatis vero dignissimos neque maiores ullam quam temporibus doloremque magni voluptates!</div>
  </div>
</div>

当然，你需要调整较小屏幕的宽度（25％），例如100％，如果你想要它堆叠，但你会明白。

为了增加关于这个问题的方法的讨论，我有类似的情况，我通过使用表模型解决了不同的问题，如下所示：

div style=display:table
    div style=display:table-row
        div style=display:table-cell

只要您可以定义行，它就可以很好地工作，这不是您的情况。我已经针对您的情况尝试了不同的方法，使用

进行测试

.sameheightRow .col-sm-3(4):after{/* change div behavior */}

但无法使其正常工作，但是，我将它留在这里，因为如果您想测试其他方法，它可能会对您有所帮助。无论哪种方式，我在顶部添加的代码都可以作为魅力。

Answer 2

这一直是div的挑战，不同的浏览器需要不同的解决方案 - 尤其是IE的各种迭代。 AFAIK的最佳答案就是使用像Boostrap这样的东西。它包括必需的JS，并经过测试可以处理所有事情。它的行和列元素都可以根据需要正确缩放。