1、双飞翼布局

最新推荐文章于 2024-07-13 10:35:00 发布

执着天际遥

最新推荐文章于 2024-07-13 10:35:00 发布

阅读量101

点赞数

分类专栏： html新知识文章标签： html

本文链接：https://blog.csdn.net/qq_41946001/article/details/83216485

版权

html新知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<style>
        .fl{
            float: left;
        }
        .h50{
            height: 50px;
        }
        /*header设置随意*/
        .header {
            width: 100%;
            margin: 0 auto;
            border: 1px solid blue;
        }
        /*宽100%*/
        .header .middel {
            width:100%;
            border: 1px solid red;
        }
        /*空出左右两边*/
        .header .middel .middle-content {
            border: 1px dashed red;
            margin: 0 390px 0 210px;
            padding-top: 5px;
            height: 45px;
        }
/*关于-100%，可以理解为位移，left本应该在header的下一行(header为块级元素)的最左边，
header的长度为100%，当left设置为margin-left: -100%;时，正好走过了header整个长度，
    来到header所在行的最左边*/
        .header .left {
            border: 1px solid #2C8DFB;
            width: 200px;
            margin-left: -100%;
        }
/*关于-200%，当left移到header所在行时，right就在header的下一行(header为块级元素)的最左边，
header的长度为100%，当right设置为margin-right: -200%;时，走过了header整个长度花了-100%，*/ 
/*来到header所在行的最左边；接着在反向移动了-100%(相当于正向移动了100%)，来到了header所在行的最右边*/
        .header .right {
            border: 1px solid #2C8DFB;
            width: 370px;
            margin-left: -380px;
            margin-right: -200%;
            padding: 5px 5px 6px 5px;
        }
    </style>
</head>
<body>
<div class="header h50">
    <div class="middel  h50">
        <div class="middle-content">
            注意中间部分要设两层，否则达不到自由调整长短的效果
            注意中间部分要设两层，否则达不到自由调整长短的效果
            注意中间部分要设两层，否则达不到自由调整长短的效果
            注意中间部分要设两层，否则达不到自由调整长短的效果
            注意中间部分要设两层，否则达不到自由调整长短的效果注意中间部分要设两层，否则达不到
            自由调整长短的效果注意中间部分要设两层
            ，否则达不到自由调整长短的效果注意中间部分要设两层，否则达不到自由调整长短的效果
        </div>
    </div>
    <div class="left fl h50">

    </div>
    <div class="right fl h50">

    </div>
</div>

执着天际遥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1、双飞翼布局

&lt;style&gt; .fl{ float: left; } .h50{ height: 50px; } /*header设置随意*/ .header { width: 100%; margin: 0...
复制链接

扫一扫