display: grid 向下排列 flex 左右排列 

<html>
    
    <head></head>
<body>
    
     <div class='A' style="display: grid ">  <!--grid  向下排列-->
        <div class="c1" style="display: flex;  justify-content: center;">   <!--flex  左右排列-->
            <img src="https://jpg.dwing.cfd/i/2023/08/12/image_1.png" alt="" style="width: 360px;height: 700px">
            <img src="https://jpg.dwing.cfd/i/2023/08/12/image_2.png" alt="" style="width: 360px;height: 700px">
            <img src="https://jpg.dwing.cfd/i/2023/08/12/image_3.png" alt="" style="width: 360px;height: 700px">
            <img src="https://jpg.dwing.cfd/i/2023/08/12/image_4.png" alt="" style="width: 360px;height: 700px">
        </div>
        <div class="c2" style="display: flex;  justify-content: center;">
            <img src="https://jpg.dwing.cfd/i/2023/08/12/image_7.png" alt="" style="width: 360px;height: 700px">
            <img src="https://jpg.dwing.cfd/i/2023/08/12/image_8.png" alt="" style="width: 360px;height: 700px">
            <img src="https://jpg.dwing.cfd/i/2023/08/12/image_9.png" alt="" style="width: 360px;height: 700px">
            <DIV style="display: grid">
                <img src="https://jpg.dwing.cfd/i/2023/08/12/image_6.png" alt="" style="width: 360px;height: 400px">
                <img src="https://jpg.dwing.cfd/i/2023/08/12/image_5.png" alt="" style="width: 360px;height: 400px">
            </DIV>
        </div>
 
    </div>
    
    
</body>    
</html>

 

posted @ 2023-08-13 01:10  JS脚本  阅读(39)  评论(0)  编辑  收藏  举报