动态地形成网格，有条件地显示单元格的底边框

Form a grid dynamically with bottom border conditionally appearing for cells

本文关键字：单元格 边框 显示 网格 动态 有条件      更新时间：2023-09-26

我需要动态地显示数据，形成一个网格，如-http://fiddle.jshell.net/suneelsfdc/Lx7g5m3d/2/与底边距

有一个集合，我将迭代并使用div articleContainer显示数据。为了解释这个问题，我添加了5个div元素。因此，我将显示每个单元格的下边框，以便它与底层单元格的上边框合并。但它看起来没有反应。如果我放大或缩小，边框不再出现在同一条线上，并且看起来扭曲了。谁能提出一个响应性的解决方案

使用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>
相关文章：