用css将DIV等分布局

最新推荐文章于 2024-05-12 10:54:35 发布

谁是听故事的人

最新推荐文章于 2024-05-12 10:54:35 发布

阅读量8.2k

点赞数 6

分类专栏： css 面试文章标签： html css

本文链接：https://blog.csdn.net/chaopingyao/article/details/108947633

版权

面试同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

在工作中经常会出现需要讲一个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>

页面显示如下所示：

目前整理方法为两种，日后有更好的方法会继续进行更新！还望大家多多指教！

参考文献：CSS 将一个页面平均分成四个部分（div）_weixin_34174105的博客-CSDN博客

谁是听故事的人

关注

6
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
用css将DIV等分布局

在工作中经常会出现需要讲一个div等分为几部分的需求，现整理方法如下：1、借助设置百分比实现均分div，代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>将页面平均分成四部分</title> <style type="text/css"> *{ ma
复制链接

扫一扫