美文网首页
双列布局

双列布局

作者: 在下高姓 | 来源:发表于2021-11-24 19:46 被阅读0次
    <style>
    
    .div{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    
    }
    .div>div{
        width: 46%;
        height: 50px;
        border: 1px red solid;
        box-sizing: border-box;
        line-height: 50px;
        text-indent: 30px;
    }
    .div>div:nth-child(4n-2){
        background-color: red;
    }
    .div>div:nth-child(4n-3){
        background-color: red;
    }
    </style>
    <body>
     <div class="div">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
    
     </div>
    </body>
    

    效果:


    image.png

    相关文章

      网友评论

          本文标题:双列布局

          本文链接:https://www.haomeiwen.com/subject/ybhotrtx.html