grid柵格佈局偷師 叨叨 目標 初步 嘗試grid佈局 問題1：間隔問題 問題2：部分layui-col-md*會顯示在同一列上，而且高度與其他不一致

叨叨

不熟悉前端知識點，感覺前端好像比逆向和後端開發更麻煩。

目標

初步 嘗試grid佈局

<!--柵格記錄-->
    <div class="layui-bg-black" >

        <div class="layui-row "id="div_materialGrid">
            <div>測試</div>
        </div>
<!--        有邊距-->

        <div class="layui-row " >
<!--           第一個圖片-->
            <div class="layui-col-md4  layui-bg-green"  style="border: red">
                <div class="layui-bg-cyan">
                    1/3-1(img+txt圖文)除了H&M，阿迪、耐克、優衣庫、無印良品等大牌也抵制新疆棉花
                </div>
                <div >
                    <img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="200" height="200">
                </div>

                <div class="layui-row layui-col-space1 ">
                    <div class="layui-col-md4">
                        2021-03-17 14:51:23
                    </div>
                    <div class="layui-col-md2 " style="border-color: #00a2d4">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                    </div>
                    <div class="layui-col-md2">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                    </div>
                </div>

            </div>
            <!--           第2個link連接素材-圖文-->
            <div class="layui-col-md4  layui-col-space3  layui-bg-green" >
                <div class="layui-bg-blue">
                    <a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(link)微信逆向之---給微信朋友圈添加控件——筆記</a>
                </div>

                <div class="layui-row layui-col-space1 ">
                    <div class="layui-col-md2">
                        desc牽手生活--今日頭條號 微信逆向之---給微信朋友圈添加控件——筆記
                    </div>
                    <div class="layui-col-md2">
                        <img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">
                    </div>
                </div>
                <div class="layui-row layui-col-space1 ">
                    <div class="layui-col-md4">
                        2021-03-17 14:51:23
                    </div>
                    <div class="layui-col-md2 " style="border-color: #00a2d4">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                    </div>
                    <div class="layui-col-md2">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                    </div>
                </div>


            </div>
            <!--           第3個 文字素材-->
            <div class="layui-col-md4  layui-bg-green" >
                <div class="layui-bg-cyan">
                    1/3-3 (txt) LayIM 前端文檔
                </div>
                <div >
                    LayIM 是基於 layui 的一款用於開發網頁端聊天系統的純靜態 UI 界面解決方案，採用 HTML、CSS、JavaScript 編寫，其包含的只是一套前端源代碼素材和相關的模擬示例，不具備後臺程序以數據庫存儲等功能。因此實際使用時，需要自己開發後端語言或對接雲服務平臺（如：融雲、環信等）。
                </div>

                <div class="layui-row layui-col-space1 ">
                    <div class="layui-col-md4">
                        2021-03-17 14:51:23
                    </div>
                    <div class="layui-col-md2 " style="border-color: #00a2d4">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                    </div>
                    <div class="layui-col-md2">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                    </div>
                </div>
            </div>

            <!--           第4個 視頻素材-->
            <div class="layui-col-md4  layui-bg-green" >
                <div class="layui-bg-orange">
                    1/3-3 (vedio)視頻描述-微信奇怪菜單
                </div>
                <div >
                    <video id="video" width="200" height="100" src="http://qny-mpkj.51wxfd.club/1615885633066.mp4" controls autoplay>
                    </video>
                </div>

                <div class="layui-row layui-col-space1 ">
                    <div class="layui-col-md4">
                        2021-03-17 14:51:23
                    </div>
                    <div class="layui-col-md2 " style="border-color: #00a2d4">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                    </div>
                    <div class="layui-col-md2">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                    </div>
                </div>
            </div>

            <!--           第5個smallApp小程序素材-小程序-->
            <div class="layui-col-md4  layui-col-space3  layui-bg-green" >
                <div class="layui-bg-blue">
                    <a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(smallApp)李寧羽毛球-ff3306系列</a>
                </div>

                <div class="layui-row layui-col-space1 ">
                    <div class="layui-col-md2">
                        冒險世界商城
                    </div>
                    <div class="layui-col-md2">
                        <img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">
                    </div>
                </div>
                <div class="layui-row layui-col-space1 ">
                    <div class="layui-col-md4">
                        2021-03-17 14:51:23
                    </div>
                    <div class="layui-col-md2 " style="border-color: #00a2d4">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                    </div>
                    <div class="layui-col-md2">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                    </div>
                </div>


            </div>

            <!--           第6個file素材-文件-->
            <div class="layui-col-md4  layui-col-space3  layui-bg-green" >
                <div class="layui-bg-blue">
                    <a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(file)Visual C#從入門到精通 第九版.docx</a>
                </div>

                <div class="layui-row layui-col-space1 ">
                    <div class="layui-col-md2">
                        <a  class="layui-btn icon-btn layui-btn-normal " href="https://jjc.qiniu.maijiacloud.cn/ae7b3b45792d4b63a56f59a9db3697eb" >下載</a>
                    </div>
                    <div class="layui-col-md2">
                        <img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="50" height="50">
                    </div>
                </div>
                <div class="layui-row layui-col-space1 ">
                    <div class="layui-col-md4">
                        2021-03-17 14:51:23
                    </div>
                    <div class="layui-col-md2 " style="border-color: #00a2d4">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                    </div>
                    <div class="layui-col-md2">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                    </div>

                </div>


            </div>


        </div>



    </div>

問題1：間隔問題

我設置了間隔爲10px （layui-col-space10） 可看效果沒有間隔

不過查看元素是有間隔

解決辦法：設置背景顏色不要設置在layui-col-md* 類上，而是應該設置在layui-col-md*的下一層的對象div上即可。

  <div class="layui-container"  >

        <div class="layui-row "id="div_materialGrid">
            <div>測試</div>
        </div>
        <!--        有邊距-->

        <div class="layui-row layui-col-space10" >
            <!--           第一個圖片-->
            <div class="layui-col-md4 "  >
                <div class="layui-bg-red">
                    <div class="layui-bg-cyan ">
                        1/3-1(img+txt圖文)除了H&M，阿迪、耐克、優衣庫、無印良品等大牌也抵制新疆棉花
                    </div>
                    <div >
                        <img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="200" height="200">
                    </div>

                    <div class="layui-row layui-col-space1 ">
                        <div class="layui-col-md4">
                            2021-03-17 14:51:23
                        </div>
                        <div class="layui-col-md2 " style="border-color: #00a2d4">
                            <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                        </div>
                        <div class="layui-col-md2">
                            <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                        </div>
                    </div>
                </div>


            </div>
            <!--           第2個link連接素材-圖文-->
            <div class="layui-col-md4" >
                <div class="layui-bg-red">
                    <div class="layui-bg-blue">
                        <a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(link)微信逆向之---給微信朋友圈添加控件——筆記</a>
                    </div>

                    <div class="layui-row layui-col-space1 ">
                        <div class="layui-col-md2">
                            desc牽手生活--今日頭條號 微信逆向之---給微信朋友圈添加控件——筆記
                        </div>
                        <div class="layui-col-md2">
                            <img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">
                        </div>
                    </div>
                    <div class="layui-row layui-col-space1 ">
                        <div class="layui-col-md4">
                            2021-03-17 14:51:23
                        </div>
                        <div class="layui-col-md2 " style="border-color: #00a2d4">
                            <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                        </div>
                        <div class="layui-col-md2">
                            <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                        </div>
                    </div>

                </div>

            </div>
            <!--           第3個 文字素材-->
            <div class="layui-col-md4 " >
                <div class="layui-bg-red">
                    <div class="layui-bg-cyan">
                        1/3-3 (txt) LayIM 前端文檔
                    </div>
                    <div >
                        LayIM 是基於 layui 的一款用於開發網頁端聊天系統的純靜態 UI 界面解決方案，採用 HTML、CSS、JavaScript 編寫，其包含的只是一套前端源代碼素材和相關的模擬示例，不具備後臺程序以數據庫存儲等功能。因此實際使用時，需要自己開發後端語言或對接雲服務平臺（如：融雲、環信等）。
                    </div>

                    <div class="layui-row layui-col-space1 ">
                        <div class="layui-col-md4">
                            2021-03-17 14:51:23
                        </div>
                        <div class="layui-col-md2 " style="border-color: #00a2d4">
                            <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                        </div>
                        <div class="layui-col-md2">
                            <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                        </div>
                    </div>
                </div>


            </div>

            <!--           第4個 視頻素材-->
            <div class="layui-col-md4 " >
                <div class="layui-bg-red">
                    <div class="layui-bg-orange">
                        1/3-3 (vedio)視頻描述-微信奇怪菜單
                    </div>
                    <div >
                        <video id="video" width="200" height="100" src="http://qny-mpkj.51wxfd.club/1615885633066.mp4" controls autoplay>
                        </video>
                    </div>

                    <div class="layui-row layui-col-space1 ">
                        <div class="layui-col-md4">
                            2021-03-17 14:51:23
                        </div>
                        <div class="layui-col-md2 " style="border-color: #00a2d4">
                            <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                        </div>
                        <div class="layui-col-md2">
                            <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                        </div>
                    </div>
                </div>

            </div>

            <!--           第5個smallApp小程序素材-小程序-->
            <div class="layui-col-md4" >
                <div class="layui-bg-red">

                    <div class="layui-bg-blue">
                        <a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(smallApp)李寧羽毛球-ff3306系列</a>
                    </div>

                    <div class="layui-row layui-col-space1 ">
                        <div class="layui-col-md2">
                            冒險世界商城
                        </div>
                        <div class="layui-col-md2">
                            <img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">
                        </div>
                    </div>
                    <div class="layui-row layui-col-space1 ">
                        <div class="layui-col-md4">
                            2021-03-17 14:51:23
                        </div>
                        <div class="layui-col-md2 " style="border-color: #00a2d4">
                            <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                        </div>
                        <div class="layui-col-md2">
                            <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                        </div>
                    </div>
                </div>



            </div>

            <!--           第6個file素材-文件-->
            <div class="layui-col-md4  " >
                <div class="layui-bg-red">
                    <div class="layui-bg-blue">
                        <a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(file)Visual C#從入門到精通 第九版.docx</a>
                    </div>

                    <div class="layui-row layui-col-space1 ">
                        <div class="layui-col-md2">
                            <a  class="layui-btn icon-btn layui-btn-normal " href="https://jjc.qiniu.maijiacloud.cn/ae7b3b45792d4b63a56f59a9db3697eb" >下載</a>
                        </div>
                        <div class="layui-col-md2">
                            <img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="50" height="50">
                        </div>
                    </div>
                    <div class="layui-row layui-col-space1 ">
                        <div class="layui-col-md4">
                            2021-03-17 14:51:23
                        </div>
                        <div class="layui-col-md2 " style="border-color: #00a2d4">
                            <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
                        </div>
                        <div class="layui-col-md2">
                            <a class="layui-btn layui-btn-danger layui-btn-xs" >刪除</a>
                        </div>

                    </div>
                </div>



            </div>


        </div>



    </div>

效果圖

問題2：部分layui-col-md*會顯示在同一列上，而且高度與其他不一致