美文网首页
双列布局

双列布局

作者: 在下高姓 | 来源:发表于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

相关文章

  • 1-11.CSS布局

    单列 单列通栏 双列布局 双列在右布局 一个三栏布局 圣杯布局 双飞翼布局 实现页面

  • CSS布局测试

    单列布局单列布局 带导航条的单列实现:代码 双列布局,侧边栏固定,主栏目自适应双列布局 三列布局:左右是固定宽度,...

  • 双列布局

    效果:

  • CSS布局

    单栏布局双列布局三列布局圣杯布局双飞翼布局效果范例

  • 总结随笔

    网页布局 - 单列布局 - 双列布局 - 三列布局 - 混合布局 单列布局 其中单列布局最为简单,一般应用于搜索引...

  • HTML双列布局

    源码

  • 常见的CSS布局

    1.单列布局:http://js.jirengu.com/casulimege/3/2.双列布局3.普通三列布局:...

  • css布局及居中

    双列布局(左右布局) 如何实现:浮动元素+普通元素 三栏式布局(左中右布局) 两侧两列固定宽度,中间列自适应宽度 ...

  • Css布局练习

    双列布局,某一列自适应宽度。 若我们想做下图所示的Css布局: Css:body{ width:500px; ma...

  • 如何实现双列布局和三列布局

    1、双列布局(拖动窗口时,窗口左边不动,右边自适应):左边宽度固定,右边自适应 2、三列布局(两边不动中间动):两...

网友评论

      本文标题:双列布局

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