HTML5基础加强css样式篇（table-cell应用，多列等宽）（五十）

最新推荐文章于 2022-07-07 12:00:32 发布

咸鸭蛋炒饭

最新推荐文章于 2022-07-07 12:00:32 发布

阅读量3.6k

点赞数

分类专栏： HTML5基础篇文章标签： css html5 经验 css3 html

本文链接：https://blog.csdn.net/u010853130/article/details/70314385

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

/*
        制作多列等宽自适应布局

        1.父元素  display:  table; width: 100%
        2.布局元素（子元素 ） display: table-cell;
        3.子元素之间的空隙，通过一个正常的div分割即可。
        4.如果存在多行，需要在包裹一个 display: table-row（<tr>）
*/

        .table-box{
            display: table;
            width: 100%;
        }
        .box {
            height: 200px;
            width: 33.3333333%;
            display: table-cell;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: blue;
        }
        .box3{
            background-color: gold;
        }

        .white-space{
            height: 200px;
            width: 5px;
            background-color: #fff;
        }


        /*display: table-cell == <td>*/

    </style>
</head>
<body>
<div class="table-box">
    <div class="box box1"></div>
    <div class="white-space"></div>
    <div class="box box2"></div>
    <div class="white-space"></div>
    <div class="box box3"></div>
</div>

<script type="text/javascript">
</script>
</body>
</html>

咸鸭蛋炒饭

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（table-cell应用，多列等宽）（五十）

/* 制作多列等宽自适应布局 1.父元素 display: table; width: 100% 2.布局元素（子元素） display: table-cell; 3.子元素之间的空隙，通过一个正常的div分割即可。 4.如果存在多行，需要在包裹一个 display: table-row（）*/
复制链接

扫一扫