CSS布局的两种方法

最新推荐文章于 2024-05-14 18:25:49 发布

jtg_Alan

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量250

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_33845788/article/details/76534670

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

双飞翼布局
Flex布局
其他方法

双飞翼布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .container{
           /* overflow:hidden;
            padding:0 400px 0 200px;*/
        }
        .main{
            width:100%;
            height:400px;
            background-color: #ffcc00;
            float:left;
        }
        .left{
            width:200px;
            height:300px;
            background-color: #CCCCCC;
            float:left;
            /*margin-left:-100%;
            position:relative;
            left:-200px;*/
        }
        .right{
            width:400px;
            height:300px;
            background-color: blue;
            float:left;
            /*margin-left:-400px;
            position:relative;
            right:-400px;*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

我将下面要解释的代码注释掉了，现在的效果为
这里写图片描述

为了使左边的块移动到上一行的左边，我们设置margin-left:-100%;然后效果为: 这里写图片描述

同理，我们要设置右边的块到上一行的最右边,我们设置margin-left:-400px;然后效果为:

接着，我们给父元素设置padding属性，把container盒子的content往中间挤.
这里写图片描述

然后把left和right设置为绝对定位，然后往两边拉
这里写图片描述

这里会有一个问题：container的高度塌陷为了0，为了解决这个问题，我们要清除浮动，给父元素加上overflow:hidden即可.

Flex布局

需要仔细了解flex属性用法的可以看一看flex的用法
在这里简单补充一下flew:flex-grow flex-shrink flex-basis的用法.

flex-grow:
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

flex-shrink:
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

flex-basis:
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;
        }
        .main {
            flex-grow: 1;
            height: 300px;
            background-color: red;
        }
        .left {
            order:-1;
            flex: 0 1 200px;
            margin-right: 20px;
            height: 300px;
            background-color: blue;
        }
        .right {
            flex: 0 1 100px;
            margin-left: 20px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

最后效果为
这里写图片描述

flex也可以实现四栏的效果,有兴趣的可以试试.

其他方法

除了以上几种，还有其他方法，可以参考CSS布局的七种方法
还有calc函数也可以动态地计算div的宽度，实现自适应.

jtg_Alan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局的两种方法

目录双飞翼布局Flex布局其他方法双飞翼布局<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .container{ /* overflow:hidden; padding:0
复制链接

扫一扫