等分布局

最新推荐文章于 2021-12-29 19:00:00 发布

weixin_43966308

最新推荐文章于 2021-12-29 19:00:00 发布

阅读量83

点赞数

分类专栏： css布局

本文链接：https://blog.csdn.net/weixin_43966308/article/details/102894928

版权

css布局专栏收录该内容

8 篇文章 0 订阅

订阅专栏

方案一：
利用width百分比实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent {
            width: 100%;
            height: 300px;
            background-color: #ccc;
        }
        
        .col1,
        .col2,
        .col3,
        .col4 {
            width: 25%;
            float: left;
            height: 300px;
        }
        
        .col1 {
            background-color: blue;
        }
        
        .col2 {
            background-color: red;
        }
        
        .col3 {
            background-color: hotpink;
        }
        
        .col4 {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
        <div class="col4"></div>
    </div>
</body>

</html>

当要实现有间距的等分布局时会出现多一条间隙，该如何解绝？
此时需要在原有基础上再包一层父级元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .pre {
            overflow: hidden;//因为内部的盒子margin-left负值 超出了该盒子的宽度。因此使用overflow:hidden
        }
        
        .parent {
            height: 300px;
            margin-left: -10px;//把盒子往做移动10px,正好覆盖了多出来的10px间隔
        }
        
        .col1,
        .col2,
        .col3,
        .col4 {
            width: 25%;
            float: left;
            height: 300px;
            box-sizing: border-box;
            padding-left: 10px;
        }
        
        .inner {
            height: 300px;
        }
        
        .col1 .inner {
            background-color: blue;
        }
        
        .col2 .inner {
            background-color: red;
        }
        
        .col3 .inner {
            background-color: hotpink;
        }
        
        .col4 .inner {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="pre">//增加的父盒子
        <div class="parent">
            <div class="col1">
                <div class="inner"></div>//使用innerde与布局无关，单纯为了能看得出间隙
            </div>
            <div class="col2">
                <div class="inner"></div>
            </div>
            <div class="col3">
                <div class="inner"></div>
            </div>
            <div class="col4">
                <div class="inner"></div>
            </div>
        </div>
    </div>
</body>

</html>

方案二：
使用display：table和display:table-cell,利用表格单元格的自动分配机制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .parent {
            width: 100%;
            /*<table>*/
            display: table;
        }
        
        .col1,
        .col2,
        .col3,
        .col4 {
            /*<td>*/
            display: table-cell;
            height: 300px;
        }
        
        .col1 {
            background-color: blue;
        }
        
        .col2 {
            background-color: red;
        }
        
        .col3 {
            background-color: hotpink;
        }
        
        .col4 {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
        <div class="col4"></div>
    </div>


</body>

</html>

第二种方案如何解决空白问题，在上述代码基础上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .pre {
            overflow: hidden;
        }
        
        .parent {
            width: 1290px;
//如果宽度依然为百分百,那么外层父盒子和内层父盒子的宽度就相等了
//从而会让最后留有空白，要想实现间距等父布局必须满足内层父盒子减去间距等于外层父盒子
            /*<table>*/
            display: table;
            margin-left: -10px;
        }
        
        .col1,
        .col2,
        .col3,
        .col4 {
            /*<td>*/
            display: table-cell;
            height: 300px;
            box-sizing: border-box;
            padding-left: 10px;
        }
        
        .inner {
            height: 300px;
        }
        
        .col1 .inner {
            background-color: blue;
        }
        
        .col2 .inner {
            background-color: red;
        }
        
        .col3 .inner {
            background-color: hotpink;
        }
        
        .col4 .inner {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="pre">
        <div class="parent">
            <div class="col1">
                <div class="inner"></div>
            </div>
            <div class="col2">
                <div class="inner"></div>
            </div>
            <div class="col3">
                <div class="inner"></div>
            </div>
            <div class="col4">
                <div class="inner"></div>
            </div>
        </div>
    </div>


</body>

</html>