Aralarında boşluk olmadan kaskad görüntüsü

Question

Dört resim eklediniz ve bunları birleştirmelisiniz, ancak bunlar arasında boşluk oluşmasına neden olamaz. Yalnızca aşağıdaki görüntünün bağlı olduğu görüntüyü değil, sonucunu göstermek için bir resim ekledim

html

<div class="content-box-left-bootomgrids"> 
    <div class="content-box-left-bootomgrid"> 

     <img src="images/room2.jpg" title="image-name" /> 
     <img src="images/Ocean.jpg" title="image-name" /> 
    </div> 

    <div class="content-box-left-bootomgrid"> 
     <h3>Welcome</h3> 
     <p><img src="images/room3.jpg" title="image-name" /> 
     <img src="images/garden.jpg" title="image-name" /></p> 
    </div> 

    <div class="content-box-left-bootomgrid lastgrid"> 
     <img src="images/room3.jpg" title="image-name" /> 
     <img src="images/exec.jpg" title="image-name" /> 
    </div> 
</div> 

CSS

.content-box-left-bootomgrids { 
    padding: 0em 0 0em 0; 
} 

.content-box-left-bootomgrid img{ 
    background:#FFF; 
    padding:0px; 
    display:block; 
    width: 93%; 
    transition: 0.5s ease; 
    -o-transition: 0.5s ease; 
    -webkit-transition: 0.5s ease; 
} 

Beklenen sonuç i ihtiyacım sonra ben 210

Answer 1

Bu CSS/HTML kombinasyonunu kullanmayı deneyin. Yazdığım yeni başlayanların anlayabileceği gibi. Ve farklı CSS özellikleri hakkında daha fazla bilgi edinmeniz gerekiyor.

.content-box-left-bootomgrids { 
 
    width: 300px; 
 
    text-align: center; 
 
} 
 
.content-box-left-bootomgrid img { 
 
    width: 50%; 
 
    margin: 0; 
 
    float: left; 
 
}

<div class="content-box-left-bootomgrids"> 
 
    <div class="content-box-left-bootomgrid"> 
 
    <h3>Welcome</h3> 
 
    </div> 
 
    <div class="content-box-left-bootomgrid"> 
 
    <img src="images/room3.jpg" title="image-name" /> 
 
    <img src="images/garden.jpg" title="image-name" /> 
 
    </div> 
 
    <div class="content-box-left-bootomgrid"> 
 
    <img src="images/room2.jpg" title="image-name" /> 
 
    <img src="images/Ocean.jpg" title="image-name" /> 
 
    </div> 
 
    <div class="content-box-left-bootomgrid lastgrid"> 
 
    <img src="images/room3.jpg" title="image-name" /> 
 
    <img src="images/exec.jpg" title="image-name" /> 
 
    </div> 
 
</div>