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

第一种方式 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>

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

推荐阅读更多精彩内容