纯css3实现栏目三等平均分配

最新推荐文章于 2023-04-12 21:17:05 发布

多隆

最新推荐文章于 2023-04-12 21:17:05 发布

阅读量5.8k

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/huayushuangfei/article/details/78349040

版权

前端专栏收录该内容

58 篇文章 1 订阅

订阅专栏

样式

*{margin:0;padding:0;font-size:12px;font-family:'Microsoft YaHei'}
#nav,#nav2{display:-webkit-box;display:-moz-box;display:box;margin:auto;margin-top:30px;border:10px solid #7f8c8d}
#nav{width:300px;height:100px;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;box-orient:horizontal}
#nav2{width:100px;height:300px;-webkit-box-orient:vertical;-moz-box-orient:vertical;box-orient:vertical}
#nav div,#nav2 div{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;text-align:center;line-height:100px;font-size:36px;color:#fff}
#box1{background:#1abc9c}
#box2{background:#3498db}
#box3{background:#9b59b6}
#box4{background:#f39c12}
#box5{background:#27ae60}
#box6{background:#c0392b}

HTML

<!-- 横向排列 -->
<div id="nav">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>
<!-- 纵向排列 -->
<div id="nav2">
    <div id="box4">4</div>
    <div id="box5">5</div>
    <div id="box6">6</div>
</div>