2.佈局解決方案- 等分

weixin_33850890發表於2016-11-27
原文網址 : https://blog.csdn.net/weixin_33850890/article/details/86932763

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

相關文章