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>

 

posted @ 2018-03-29 09:49  renyangli  阅读(410)  评论(0)  编辑  收藏  举报