以html

Question

我需要在每张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 -->

Answer 1

您可以在HTML中使用该表格。这有行（tr）和列（td） 请参阅下面的示例。根据需要控制表格和填充的宽度以及cellspacing。还可以在线阅读有关表格标签的更多信息：

    <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>