zoukankan html css js c++ java

Html和CSS布局技巧-九宫格布局（三）

三、九宫格布局

<!-- 利用table实现 -->
<style media="screen">
    .parent{ display: table; table-layout: fixed; width: 100%; }
    .row { display: table-row; }
    .item{ display:table-cell; width: 33.3%; height: 200px; }
</style>
<body>
    <div class="parent">
        <div class="row">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <div class="row">
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
        <div class="row">
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </div>
</body>

<!-- 利用flex实现 -->
<style media="screen">
.parent{display: flex;flex-direction: column;}
.row{height: 100px;display: flex;}
.item{width: 100px; background: red;}
</style>
<body>
    <div class="parent">
        <div class="row">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <div class="row">
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
        <div class="row">
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </div>
</body>

查看全文

相关阅读:
Django Restframework 实践（二）
mysql in 过滤解决转义问题
 automapper
autoface
各种文件上传转载
 REST Client
MySql PartionBy
mysql 变量名称不能与表字段一致
 mysql 存储过程分页转载
 dapper.net 转载

原文地址：https://www.cnblogs.com/ron123/p/8668080.html