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>

来源：oschina

链接：https://my.oschina.net/u/4388720/blog/4028278

标签

FLEX

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!