用css将DIV等分布局

最新推荐文章于 2025-01-16 15:30:09 发布

原创最新推荐文章于 2025-01-16 15:30:09 发布 · 1w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

面试同时被 2 个专栏收录

16 篇文章

订阅专栏

css

7 篇文章

订阅专栏

本文详细介绍了如何使用CSS将div等分为多个部分，包括通过设置百分比宽度和高度实现横向或纵向等分，以及利用calc()函数动态计算尺寸的方法。这两种方法能够灵活地将页面平均分成所需的部分，适用于前端开发中布局需求。

在工作中经常会出现需要讲一个div等分为几部分的需求，现整理方法如下：

1、借助设置百分比实现均分div，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将页面平均分成四部分</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .quarter-div{
            width: 33%;
            height: 33%;
            float: left;
        }
        .blue{
            background-color: #5BC0DE;
        }
        .green{
            background-color: #5CB85C;
        }
        .orange{
            background-color: #F0AD4E;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="quarter-div blue"></div>
        <div class="quarter-div green"></div>
        <div class="quarter-div orange"></div>
    </div>
</body>
</html>

页面显示如下图所示：

目前div是按照横向（x轴）等分的，若需要按照纵向（y轴）等分，只需要去掉quarter-div类中的float：left属性设置即可（因为div本来就是块级元素，故会每个占用一行显示，设置float：left会使其显示在一行，因此需要纵向等分的话，则不用设置float：left，按照原始显示即可）。页面显示如下所示：

2、使用 calc() 函数动态设置宽高

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将页面平均分成三部分</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .quarter-div{
            width: calc(100vw / 3);
            height: calc(100vh / 3);
            float: left;
        }
        .blue{
            background-color: #5BC0DE;
        }
        .green{
            background-color: #5CB85C;
        }
        .orange{
            background-color: #F0AD4E;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="quarter-div blue"></div>
        <div class="quarter-div green"></div>
        <div class="quarter-div orange"></div>
    </div>
</body>
</html>

页面显示如下所示：