h5双飞翼布局

最新推荐文章于 2022-11-20 23:50:22 发布

一只头秃的死肥宅

最新推荐文章于 2022-11-20 23:50:22 发布

阅读量514

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签：浮动 HTML5 新手双飞翼界面

本文链接：https://blog.youkuaiyun.com/xuemoKingDeath/article/details/70943503

HTML5 专栏收录该内容

54 篇文章

订阅专栏

本文介绍了一种通过CSS的margin属性实现主内容优先显示的技术。该技术通过设置负margin值让左侧和右侧模块浮动在主要内容上方，从而确保用户能够快速看到页面的主要部分。文章提供了具体的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了优先加载主界面内容，进行利用margin的负值使左右模块浮在主要内容的上面

注意不是左中右的块级书写顺序，先写主再是左右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .main,.left,.right{
            float: left;
            height: 200px;
        }
        .main{
            width: 100%;
            background-color: red;

        }
        .left{
            width: 20%;
            background-color: yellow;
            margin-left: -100%;
        }
        .right{
            width: 20%;
            background-color: blue;
            margin-left: -20%;
        }
        .zhong{
            margin: 0 20% 0 20%;

        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="zhu">
    <div class="main">77777
        <div class="zhong">666666666</div>
    </div>
    <div class="left">zuo</div>
    <div class="right">you</div>
</div>
</body>
</html>