多栏布局解决方案之双飞翼布局

最新推荐文章于 2024-05-29 09:23:38 发布

秃头的甜甜圈

最新推荐文章于 2024-05-29 09:23:38 发布

阅读量137

点赞数 1

分类专栏：多栏布局

本文链接：https://blog.csdn.net/personaas/article/details/98523606

版权

多栏布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

特点：给中心盒子里边再套一个盒子用来放置内容，这个盒子设置左右两侧的外边距，目的是把内容放到中心盒子身上展示
双飞翼布局，始于淘宝UED。如果把三栏布局比作一只鸟，可以把main看做是鸟的身体，left 和 right 则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。双飞翼也是三列自适应布局（中间100%，两侧固定宽度）。
步骤：
1.先将三个盒子浮动并排（先写中间盒子，再写两侧保证左右两侧盒子同时并排到右侧）
2.左右两侧盒子用负左外边距放到中间盒子的两侧（左侧盒子 margin-left: -100%（中间盒子宽度）; 右侧盒子 margin-left: -300px（自身宽度）;）
3.设置inner盒子的左右外边距 margin: 0px 300px; ，数值分别是左右两侧盒子的宽度，内容就会展示出来

<!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>
    *{
        margin: 0;
        padding: 0;
    }
    .center{
        float: left;
        width: 100%;
        height: 300px;
        font-size: 20px;
        background-color: palevioletred;
    }
    .left{
        float: left;
        width: 300px;
        height: 300px;
        font-size: 20px;
        line-height: 300px;
        text-align: center;
        background-color: yellow;
        margin-left: -100%;
    }
    .right{
        float: left;
        width:300px;
        height: 300px;
        font-size: 20px;
        line-height: 300px;
        text-align: center;
        background-color: skyblue;
        margin-left: -300px;
    }
    .inner{
        margin: 0px 300px;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="center">
            <div class="inner">
                center
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

第一步得到的：
在这里插入图片描述
第二步：

第三步：

秃头的甜甜圈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多栏布局解决方案之双飞翼布局

特点：给中心盒子里边再套一个盒子用来放置内容，这个盒子设置左右两侧的外边距，目的是把内容放到中心盒子身上展示步骤：1.先将三个盒子浮动并排（先写中间盒子，再写两侧保证左右两侧盒子同时并排到右侧）2.左右两侧盒子用负左外边距放到中间盒子的两侧（左侧盒子 margin-left: -100%（中间盒子宽度）; 右侧盒子 margin-left: -300px（自身宽度）;）3.设置inner...
复制链接

扫一扫

专栏目录