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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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 @   JS脚本  阅读(42)  评论(0)  编辑  收藏  举报
相关博文：
·  flex-directionrow：横向从左到右排列（左对齐），默认的排列方式 属性 从左到右的属性
·  div 调像素
·  设置display:flex后 flex布局设置单个子元素靠右
·  display: flex实现元素居中
·  弹性布局（ display: flex;）
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手