首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2.布局解决方案- 等分<7>

2.布局解决方案- 等分<7>

作者头像
河湾欢儿
发布2018-09-06 16:25:32
2720
发布2018-09-06 16:25:32
举报

第一种方式 float +box-sizing

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,p{
            padding: 0;
            margin: 0;
        }
        .column{
            width: 25%;
            float: left;
            padding-left: 10px;
            box-sizing: border-box;
        }
        .column p{
            background: red;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="column"><p>内容1</p></div>
    <div class="column"><p>内容1</p></div>
    <div class="column"><p>内容1</p></div>
    <div class="column"><p>内容1</p></div>
</div>
</body>
</html>

但是具有耦合性去掉一列的话还要修改样式这是它的不足之处

第二种方式 display:table

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,p{
            padding: 0;
            margin: 0;
        }
        .parent{
            display: table;
            width: 100%;
        }
        .column{
             display: table-cell;
             padding-left: 10px;
        }
        .column p{
            background: greenyellow;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="column"><p>内容1</p></div>
    <div class="column"><p>内容1</p></div>
    <div class="column"><p>内容1</p></div>
    <div class="column"><p>内容1</p></div>
</div>
</body>
</html>

第三种方式 flex

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,p{
            padding: 0;
            margin: 0;
        }
        .parent{
            display: flex;
        }
        .column{
            background: yellowgreen;
            flex: 1;
            margin-left: 10px;
        }
        .column p{
            background: red;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="column"><p>内容1</p></div>
    <div class="column"><p>内容1</p></div>
    <div class="column"><p>内容1</p></div>
    <div class="column"><p>内容1</p></div>
</div>
</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.11.27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档