Question

我有一个网格图像库。我想在所有图像图片之间只有灰色的网格线边界，只有内部的而不是外部的边界。我该怎么做？通读所有文档，寻求网格线颜色属性。

有人知道CSS或HTML中的属性吗？我将有不同的图片配置。

.card {
    border-color: #D3D3D3;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    margin-right: 0;
    padding: 0;
}

.card-header {
    background-color: white;
}

.card-body {
    background-color: white;
}


.cardcheckbox {
    position: absolute;
    right: 5px;
    top: 5px;
    /*vertical-align: middle;
    float: right;*/
    visibility: hidden;
}


input[type=checkbox]:checked {
    visibility: visible;
}

.card:hover .cardcheckbox {
    visibility: visible;
}


.material-icons {
    display: inline-flex;
    vertical-align: top;
}

.card-header .accordion-toggle {
    &.collapsed:after {
        font-family: 'Material Icons';
        content: "\e5cf";
    }

    &:after {
        font-family: 'Material Icons';
        content: "\e5ce";
        float: right;
        color: grey;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="card" style="width: 30.00rem">
   <div aria-multiselectable="true" class="accordian md-accordion" id="accordionEx" role="tablist">
      <div class="grid-container" id="gridid531937b3b9b54801ab80573cf91d0852" style="  display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(1, 1fr);
         grid-gap: 0em;
         padding: 0px;
         align-items: stretch;
         position: relative; "><input class="cardcheckbox" id="checkid" type="checkbox"><img id="imgid531937b3b9b54801ab80573cf91d08520" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image" style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"><img id="imgid531937b3b9b54801ab80573cf91d08521" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"><img id="imgid531937b3b9b54801ab80573cf91d08522" src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"></div>
      <div class="card-header" id="headingOne1" role="tab"><a aria-controls="id531937b3b9b54801ab80573cf91d0852" aria-expanded="true" class="accordion-toggle collapsed" data-parent="#accordionEx" data-toggle="collapse" href="#id531937b3b9b54801ab80573cf91d0852">Tree</a></div>
      <div aria-labelledby="headingOne1" class="collapse" data-parent="#accordionEx" id="id531937b3b9b54801ab80573cf91d0852" role="tabpanel">
         <div class="card-body">Tree with leaves</div>
      </div>
   </div>
</div>

Answer 1

您可以使用grid-template-columns完成操作。

创建一个父容器，其中将容纳您的四个图像。
设置背景色（边框的所需颜色）。
将填充设置为0
然后按技巧通过grid-template-column排列图像：auto
自动；
然后在它们之间添加间隙grid-gap：10px; （以显示的背景色容器作为网格）。

请参阅下面的代码以供参考

.container {
  width: 200px;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;

  background-color: #000;
  padding: 0;
}
.container > div {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

html

<div class="container">
      <div>Image here</div>
      <div>Image Here</div>
      <div>Image here</div>
      <div>Image here</div>
    </div>

帮助您可视化我创建示例代码

http://plnkr.co/edit/gIeumXLt0k3FPVCgGlDd?p=preview

希望有帮助

干杯！

HTML CSS：仅为内部元素添加了边框网格线

1 个答案: