Question

我想创建一个4x3＆＃34;流畅的响应＆＃34;表与css。当我用鼠标击中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);
}

Answer 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;
}

pluk https://jsfiddle.net/1u15t1xq/

如何在＆＃34;细胞之间增加2px的差距＆＃34;

1 个答案: