html - 如何使所有列的高度与所有列都在同一行的最大列的高度相同？

Question

示例标记如下所示。所有 block 都在同一个容器中。

<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

在 Mobile 中，所有列将相互堆叠

当超过 1 列出现在同一行时，应该具有相同的高度

我知道如果我使用两个 .rows 那么我可以解决这个问题，但在我目前的要求中我不能这样做。因为如果第一行只有 2 个愿望，那么第三个 block 将是空白的。第二行的第一个方 block 不会跳到那个位置

我不想使用 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 */}

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