Question

我有一个代码，只在一行内将文章呈现为col-md-6 div（如下面的代码所示）。每篇文章都有不同的高度。目标是获得（光学）两列物品的总高度大致相等。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-6">
        <article style="background: yellow; height: 200px;">
           FIRST
        </article>
    </div>
    <div class="col-xs-6">
        <article style="background: red; height: 300px;">
           SECOND
        </article>
    </div>
    <div class="col-xs-6">
        <article style="background: green; height: 350px;">
           THIRD
        </article>
    </div>
    <div class="col-xs-6">
        <article style="background: gray; height: 200px;">
           FOURTH
        </article>
    </div>
   </div>

问题是第一个和第三个div之间的白色垂直间隙，如下面的代码段所示。是否可以在没有垂直间隙的情况下在第一个div下方显示第三个div？

＆＃13;

$coordinator = '';

$start = true;
while($data = $rs->fetch_assoc()){


    if($data['email'] != $cordinator){


        $message .= TableHeader($fune[$i], $data['coordinator']);
        $message .= $rows;
        $message .= '</table>';     
        $message .= '<br><br>';

        echo $message;
        $message = '';
        $rows = '';


    }

    $rows .= '<tr>
            <td>'.$data['case_no'].'</td>
            <td>'.$data['deceased_name'].'</td>
            <td>'.$data['notes'].'</td>
        </tr>';
    $start = false; 

    $coordinator = $data['email'];  

}

＆＃13;

Answer 1

正如我的评论中提到的，masonry.js将是最好的方法。如果你想要更简单的东西，你可以简单地重新构造html，参见例子https://jsfiddle.net/kvb5hb6f/12/

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-6">
    <div class="col-xs-12">
      <article style="background: yellow; height: 200px;">
        FIRST
      </article>
    </div>
    <div class="col-xs-12">
      <article style="background: green; height: 350px;">
        THIRD
      </article>
    </div>

  </div>
  <div class="col-xs-6">
    <div class="col-xs-12">
      <article style="background: red; height: 300px;">
        SECOND
      </article>
    </div>

    <div class="col-xs-12">
      <article style="background: gray; height: 200px;">
        FOURTH
      </article>
    </div>
  </div>
</div>

垂直压缩的bootstrap行

1 个答案: