用html组织图片

我需要在4张图片的每一行下面加一个白色的行或其他一些东西，以更好的方式组织我的图片。我是HTML语言新手。也许我可以将图片设置成网格，但我不知道如何设置

现在，我的html是：

这是我的密码：

<!-- start portfolio Section -->
<section id="protfolio_sec">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs12 ">
                <div class="title_sec">
                    <h1>Our Portfolio</h1>
                    <h2>WE’RE BRANDING & DIGITAL STUDIO FROM VIET NAM</h2>
                </div>          
            </div>
        </div>       
    <div class="all-portfolios">
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1Tyw2_WSc0vtAOEkGGNMoKUOalqkpTGhU" alt="">     
        </div>        
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1_m349B3UpIEe_H6GTS_iIOSau5_ui495" alt="">     
        </div>          
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=16NHSj04XvEOGF0FMvpGOZZzTenSLjbYs" alt="">      
        </div>          
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1T7e1E7Nkr37zVsPMorwZ1epSBzQDNxCi" alt="">       
        </div>          
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1StRD1M5VIgsjppFfLHoo5jm4nFCYaXc8" alt="">      
        </div>          
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1sEOoK3DkPL1Ae3Ssbbl_UUicweSXey-0" alt="">      
        </div>        
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1h2jHdeHdKonUV4b-chwDbFTDFL3kgjbg" alt="">
        </div>
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1tHObIoEXvU7Q-VqKco-r0TbDNbi9UK2L" alt="">
        </div>
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1UGow9lO1acWYK3sg4laTNrZ7ksIuaahk" alt="">
        </div>
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1ICItudvz6ekE4MMTio6D-il2jxiIjYzg" alt="">
        </div>
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1bnfzSAKZpdBoC1JgCBI5oMKrG39DVA1X" alt="">
        </div>
        <div class="col-sm-6  col-lg-3 col-md-3 col-xs-12 ">
        <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1GXSPr1z0-L2bHyb4-9XJ1Bt5Mg_jeKDr" alt="">
        </div>
    </div>
    <div class="post_btn">
    </div>      
    </div>
</section>
<!-- End Portfolio Section -->

---

您可以在HTML中使用该表。这有tr行和td列 请参见下面的示例。根据需要控制表格和填充的宽度以及单元格间距。另外，请联机阅读有关表格标记的更多信息：

    <table width="800" cellspacing="20" cellpadding="20">
        <tr>
            <td width="33%" valign="top">
               <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1Tyw2_WSc0vtAOEkGGNMoKUOalqkpTGhU" alt="">     

            </td>
            <td width="33%" valign="top">
               <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1Tyw2_WSc0vtAOEkGGNMoKUOalqkpTGhU" alt="">     

            </td>
            <td width="33%" valign="top">
               <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1Tyw2_WSc0vtAOEkGGNMoKUOalqkpTGhU" alt="">     

            </td>
        </tr>
        <tr>
            <td width="33%" valign="top">
               <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1Tyw2_WSc0vtAOEkGGNMoKUOalqkpTGhU" alt="">     

            </td>
            <td width="33%" valign="top">
               <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1Tyw2_WSc0vtAOEkGGNMoKUOalqkpTGhU" alt="">     

            </td>
            <td width="33%" valign="top">
               <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1Tyw2_WSc0vtAOEkGGNMoKUOalqkpTGhU" alt="">     

            </td>
        </tr>
    </table>

您不应该使用来实现您想要的，因为br元素不会响应，而您的所有其他代码都会响应

您可能希望在CSS中添加一些边距，以在图像之间创建间隙：

.all-portfolios img{
  margin: .5em;
}

注意：没有结束标记

---

我希望这能有所帮助。

你想做什么？请用以下方法对@AmyI的图片行进行评分：@Amy@MartinBouhier我为你补充了一个答案。您不应该使用br来执行此操作。：，在这里使用它是不合适的用法。你最好有一张桌子或一些CSS。