一个全等四宫格实现的多种方法

时间：2015-07-27 18:28:20 阅读：167 评论：0 收藏：0 [点我收藏+]

标签：

方法一：用float方法实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>一个全等四宫格的实现</title>
        <style>
            .parent{
                background-color:#fff;
                width: 500px;
                height: 400px;
                margin-left: -10px;
                margin-top: -10px;
            }
            .child{
                float: left;
                width: 50%;
                height: 50%;
                padding-left: 10px;
                padding-top: 10px;
                box-sizing: border-box;
                background-clip: content-box;
                background-color: #009899;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </body>
</html>

三法并用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*方法1：float*/
        .container1{width:400px;height:400px;border:1px solid red;margin-top:-10px;margin-left:-10px;}
        .column1{float:left;background: blue;width:50%;height:50%;padding-left: 10px;
                padding-top:10px;box-sizing:border-box; background-clip:content-box;}
  
        /*方法2：table*/
        .container-fix{margin-left:-10px; margin-top:-10px;}
        .container2{display: table;width:400px; height:400px; table-layout: fixed;}
        .row2{display: table-row;}
        .column2{display: table-cell;background: blue;width:50%; height:50%;
            padding-left: 10px; padding-top: 10px;  background-clip:content-box;}
        p{height:100%;}
  
        /*方法3:flex*/
        .container3{width:400px; height:400px;}
        .row3{display: flex; height:50%;}
        .column3{flex:1; background: blue;margin-left: 10px;margin-top: 10px;
        }
  
    </style>
</head>
<body>
    <div class="container1">
        <div class="column1"></div>
        <div class="column1"></div>
        <div class="column1"></div>
        <div class="column1"></div>
    </div>
      
      
    <div class="container-fix">
        <div class="container2">
            <div class="row2">
                <div class="column2"><p></p></div>
                <div class="column2"><p></p></div>
            </div>
            <div class="row2">
                <div class="column2"><p></p></div>
                <div class="column2"><p></p></div>
            </div>
        </div>
    </div>
  
    <div class="container3">
        <div class="row3">
        <div class="column3"><p></p></div>
        <div class="column3"><p></p></div>
        </div>
        <div class="row3">
        <div class="column3"><p></p></div>
        <div class="column3"><p></p></div>
        </div>
    </div>
</body>
</html>

一个全等四宫格实现的多种方法

标签：

原文地址：http://www.cnblogs.com/Hellowor1d/p/4680726.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行