如何在“单元格”之间添加 2px 间隙答案

【问题标题】：How to add 2px gap between "cells"如何在“单元格”之间添加 2px 间隙
【发布时间】：2015-08-07 21:26:59
【问题描述】：

我想用 css 创建一个 4x3 的“流利响应”表。当我在 div 上点击鼠标时会产生一些效果。现在，这是我的标记，效果很好。除了边距。

单元格的宽度为 25%，所以如果我使用边距而不是第四个单元格，则换行..

请帮助纠正我的代码，我希望单元格之间有 2px 的间隙。

这是我的 HTML+CSS 部分

<!doctype html>

    <head>

        <link rel="stylesheet" href="css/main2.css">

    </head>
    <body>


    <div class="wrapper">
            <div class="container">
                <div class="sor" style="background-color:red">
                  <div class="grid-container">
                   <div class="col-md-12">
                      <div class="cella"> <img class="images_main" src="images/1.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/2.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/3.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/4.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/5.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/6.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/7.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/8.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/9.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/10.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                       <div class="cella"> <img class="images_main" src="images/11.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                       <div class="cella"> <img class="images_main" src="images/12.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                    </div>
                  </div>
                 </div>
            </div>

       </div>



    </body>
</html>


.wrapper{
    background-color: rgba(0, 0, 0, 0.05);
    width:100%
}



.cella {

       width: calc(100%/4);
       height: 50%;
       float: left; 
       overflow:hidden;
       position: relative;


}


.cella img {
 -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: scale(1.1);
}
.cella:hover img{
   transform: scale(1); 

}

.grid-container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.images_main {
  width:100%;

}
.cella .overbox {
  background-color:#34aadc;
  position: absolute;

  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 100%;
  float: left; 
  height:100%;
  top:0;
}
.cella:hover .overbox { opacity: 0.9;     /*border: 10px solid #fff;*/}

.overbox .title {
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
  border: 2px solid white;
  bottom: 5px;
  top: 5px;
  left: 5px;
  right:5px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: bold;
  line-height: 11em;
  min-height: 92%;
  position: absolute;
  text-transform: uppercase;
  text-align:center;
  vertical-align: middle;

}
.overbox:hover .title,
.overbox:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

【问题讨论】：

您的代码无法在 chrome 中运行。请检查。
清理我的代码，只有 html + css，没有 bootstrap... 如果你剪切 + 粘贴到 html + css 比应该看到什么
我只复制了一个 css 一个 html 但它不起作用。请使用您的 html+css jsfiddle.net/pqej3bke 检查此 jsfiddle
Leo - 我不明白这个问题。我将 html 和 css 复制到新文件，新位置..它没问题...
可能对我不起作用。但在 ff 中还可以……抱歉麻烦了。

标签： html css twitter-bootstrap grid

【解决方案1】：

你可以这样做

.cella {
       width: calc(100%/4 - 6px);
       height: 50%;
       float: left; 
       overflow:hidden;
       position: relative;
       margin-right:2px;
}
.cella:nth-child(4n){
    margin-right:0px;
}

插件https://jsfiddle.net/1u15t1xq/

【讨论】：

是的，几乎没问题，但我认为有一个“更清洁”的解决方案......我使用了 24% 的单元格宽度，设置为 25%，结果几乎是你的......
第 nth-child(4n) 不起作用 - 我认为这应该从行尾删除 margin-right （每 4. div）