無法制作一個2x2圖像網格[CSS]

Question

我一直在努力解決這個問題，我在左邊有一個大圖像，我想在右邊做一個2x2圖像網格（下面有標題），但我似乎無法正確對齊這些圖像。

試圖在沒有表或Bootstrap的情況下執行此操作。

<div class="content"> 

     <div class="bigpicture"> 

      <!-- --> 

     </div> 

     <div class="rightpicture"> 

      <figure class="smallpicture"> 
       <a href="img/img2.jpg" target="_blank"><img src="img/img2.jpg" /></a> 
       <figcaption class="caption">Text below the image</figcaption> 
      </figure> 


      <figure class="smallpicture"> 
       <a href="img/img3.jpg" target="_blank"><img src="img/img3.jpg" /></a> 
       <figcaption class="caption">Text below the image</figcaption> 
      </figure> 


      <figure class="smallpicture"> 
       <a href="img/img4.jpg" target="_blank"><img src="img/img4.jpg" /></a> 
       <figcaption class="caption">Text below the image</figcaption> 
      </figure> 

      <figure class="smallpicture"> 
       <a href="img/img5.jpg" target="_blank"><img src="img/img5.jpg" /></a> 
       <figcaption class="caption">Text below the image</figcaption> 
      </figure> 

     </div> 

    </div> 

的CSS：

.bigpicture {   /* picture on the left styling */ 
    border: 1px solid black; 
    width: 650px; 
    height: 450px; 
    margin-left: 50px; 
    margin-top: 20px; 
    float: left; 
    background-image: url("../img/img1.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

.rightpicture { 
    width: 650px; 
    height: 450px; 
    margin-right: 50px; 
    margin-top: 20px; 
    float: right; 
} 

.smallpicture { 
    vertical-align: top; 
    display: inline-block; 
    text-align: center; 
} 

.smallpicture img { 
    width: 15%; 
    height: auto; 
    padding: 5px;    /* space between the image and the border */ 
    margin: 10px;    /* space between the 4 images */ 
    border: 1px solid black; /* picture border */ 
} 

.smallpicture a { 
    text-decoration: none;  /* remove the underline under the images */ 
} 

.caption { 
    display: block; 
} 

現在它的外觀：

Answer 1

使用width:50%;和float:left;上.smallpicture，並且確保它有margin:0;padding:0;。

這是一個工作片段。

.bigpicture {   /* picture on the left styling */ 
 
    border: 1px solid black; 
 
    width:700px; 
 
    height: 500px; 
 
    margin-left: 50px; 
 
    margin-top: 20px; 
 
    float: left; 
 
    background-image: url("http://images.financialexpress.com/2015/12/Lead-image.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
} 
 

 
.rightpicture { 
 
    width: 500px; 
 
    height: 500px; 
 
    margin-right: 50px; 
 
    margin-top: 20px; 
 
    float: right; 
 
} 
 

 
.smallpicture { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width:50%; 
 
    margin:0; 
 
    padding:0; 
 
    float:left; 
 
    text-align: center; 
 
} 
 

 
.smallpicture img { 
 
    width: 30%; 
 
    height: auto; 
 
    padding: 5px; /* space between the image and the border */ 
 
    display:block; 
 
    margin: 10px auto;    /* space between the 4 images */ 
 
    border: 1px solid black; /* picture border */ 
 
} 
 

 
.smallpicture a { 
 
    text-decoration: none;  /* remove the underline under the images */ 
 
} 
 

 
.caption { 
 
    display: block; 
 
}

<div class="content"> 
 

 
     <div class="bigpicture"> 
 

 
      <!-- --> 
 

 
     </div> 
 

 
     <div class="rightpicture"> 
 

 
      <figure class="smallpicture"> 
 
       <a href="img/img2.jpg" target="_blank"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" /></a> 
 
       <figcaption class="caption">Text below the image</figcaption> 
 
      </figure> 
 

 

 
      <figure class="smallpicture"> 
 
       <a href="img/img3.jpg" target="_blank"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" /></a> 
 
       <figcaption class="caption">Text below the image</figcaption> 
 
      </figure> 
 

 

 
      <figure class="smallpicture"> 
 
       <a href="img/img4.jpg" target="_blank"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" /></a> 
 
       <figcaption class="caption">Text below the image</figcaption> 
 
      </figure> 
 

 
      <figure class="smallpicture"> 
 
       <a href="img/img5.jpg" target="_blank"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" /></a> 
 
       <figcaption class="caption">Text below the image</figcaption> 
 
      </figure> 
 

 
     </div> 
 

 
    </div>

Answer 2

你試過只是小圖片的寬度設置爲50％？我敢肯定，這隻會填充容器的50％，你的情況是「rightpicture」