码迷,mamicode.com
首页 > Web开发 > 详细

css 平均分配多列

时间:2016-04-20 16:23:11      阅读:727      评论:0      收藏:0      [点我收藏+]

标签:

<style>
    *{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}
</style>
    <!-- 横向排列 -->
    <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>

  

css 平均分配多列

标签:

原文地址:http://www.cnblogs.com/ssj-777/p/5413220.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!