Question

我需要动态显示数据以形成类似于 - http://fiddle.jshell.net/suneelsfdc/Lx7g5m3d/2/ With bottom margin

的网格

我将使用div articleContainer迭代并显示数据。为了解释这个问题，我添加了5个div元素。所以我显示每个单元格的底部边框，以便它与底层单元格的顶部边框合并。但它看起来并不敏感。如果我放大或缩小，边框不再出现在同一条线上并且看起来扭曲。任何人都可以建议一个响应式解决方案

Answer 1

使用bootstrap非常简单，反应灵敏。请阅读Bootstrap

<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <title>SemiTransparentBack</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 </head>
 <body>
 <style type="text/css">
  body{

  }

  .back{
    background:rgba(0,0,0,0.7);
    color: white;
    border-top:2px solid #000;
    border-bottom:2px solid #000;
    height: 100px;
    margin: 5px 1px 5px 0px;
  }
 </style>
    <div class="container">

      <div class="row">

       <div class="col-md-4">
        <div class="back">123</div>
       </div>
       <div class="col-md-4">
        <div class="back">123</div>
       </div>
       <div class="col-md-4">
        <div class="back">123</div>
       </div>
       <div class="col-md-4">
        <div class="back">123</div>
       </div>
       <div class="col-md-4">
        <div class="back">123</div>
       </div>
       <div class="col-md-4">
        <div class="back">123</div>
       </div>

      </div><!--end row-->

    </div>
 </body>
</html>

动态形成网格，底部边框有条件地出现在单元格中

1 个答案: