我怎樣才能獲得相同類圖像之間的空間？

我怎樣才能得到我的圖像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

我怎樣才能獲得相同類圖像之間的空間？

回答

相關問題