我怎样才能获得相同类图像之间的空间？

我怎样才能得到我的图像2 2布局，而不是通过CSS的网页堆叠单个图像，如果可能的话，我想不需要JavaScript的方法，因为我对它没有任何知识或经验。由于某种原因，当我使用代码片段运行此代码时，它显示了我想要的2乘2布局，但是当我尝试在例如我的代码上运行代码时，情况并非如此。铬。我怎样才能获得相同类图像之间的空间？

.box { 
 
    cursor: pointer; 
 
    height: 281px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 500px; 
 
    margin-left:150px; 
 
    display: inline-block; 
 
    margin-bottom: 35px; 
 
    float:left; 
 
} 
 

 
.box img { 
 
    position: absolute; 
 
    left: 0; 
 
    -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; 
 
} 
 
.box .overbox { 
 
    background-color: #304562; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    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: 500px; 
 
    height: 281px; 
 
    padding: 130px 20px; 
 
} 
 

 
.box:hover .overbox { opacity: 1; } 
 
.box .overtext { 
 
    -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: translateY(40px); 
 
    -webkit-transform: translateY(40px); 
 
} 
 

 
.box .title { 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    opacity: 0; 
 
    transition-delay: 0.1s; 
 
    transition-duration: 0.2s; 
 
} 
 

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

 
.box .tagline { 
 
    font-size: 0.8em; 
 
    opacity: 0; 
 
    transition-delay: 0.2s; 
 
    transition-duration: 0.2s; 
 
} 
 

 
.box:hover .tagline, 
 
.box:focus .tagline { 
 
    opacity: 1; 
 
    transform: translateX(0px); 
 
    -webkit-transform: translateX(0px); 
 
}

</div> 
 
     <div class="box"> <img src="../images/Ferrari2.jpg" > 
 
     <div class="overbox"> 
 
     <div class="title overtext">Ferrari 458 Italia Spider</div> 
 
     <div class="tagline overtext">SPECS:</div> 
 
</div> 
 
</div> 
 
</div> 
 
     <div class="box"> <img src="../images/Italia.jpg"> 
 
     <div class="overbox"> 
 
     <div class="title overtext">Ferrari 458 Italia</div> 
 
     <div class="tagline overtext">SPECS:</div> 
 
</div> 
 
</div> 
 
</div> 
 
     <div class="box"> <img src="../images/R35-2.jpg"> 
 
     <div class="overbox"> 
 
     <div class="title overtext">Nissan R35 GTR</div> 
 
     <div class="tagline overtext">SPECS:</div> 
 
</div> 
 
</div> 
 
     <div class="box"> <img src="../images/P1.jpg"> 
 
     <div class="overbox"> 
 
     <div class="title overtext">Mclaren P1</div> 
 
     <div class="tagline overtext">SPECS:</div> 
 
</div> 
 
</div> 
 
     <div class="box"> <img src="../images/GT3.jpg"> 
 
     <div class="overbox"> 
 
     <div class="title overtext">Porsche GT3 </div> 
 
     <div class="tagline overtext">SPECS:</div> 
 
</div> 
 
</div> 
 
     <div class="box"> <img src="../images/R8-2.jpg"> 
 
     <div class="overbox"> 
 
     <div class="title overtext">Audi R8</div> 
 
     <div class="tagline overtext">SPECS:</div> 
 
</div> 
 
</div>

来源

2015-12-02 Ir0nflawd

在HTML中你可以简单地添加br属性。这将允许您为图像添加换行符。更好的方法是将图像宽度设置为100％。

来源

2015-12-03 00:15:42

我怎样才能获得相同类图像之间的空间？

回答

相关问题