双飞翼布局

最新推荐文章于 2022-03-21 22:52:55 发布

sunOpar

最新推荐文章于 2022-03-21 22:52:55 发布

阅读量533

点赞数 1

分类专栏： web前端小白之路文章标签： html 布局 css

本文链接：https://blog.csdn.net/sunOpar/article/details/50644887

版权

24 篇文章 0 订阅

订阅专栏

第一可以实现三列布局左右固定宽度，中间宽度自适应，第二个，通常三列布局都是按照左(sub)中(main)右(extra)顺序来写的，这样页面也会根据这个DOM结构来顺序加载，而如果用双飞翼布局，可以使三列布局中mian先加载，sub和extra后加载。

html:

<body>
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</body>

css:

.main{ float:left;width:100%;}
.sub{  float:left;width:190px;margin-left:-100%;}
.extra{float:left;width:230px;margin-left:-230px;}

效果如图：

此时sub和extra都定位到正常位置了，但是main的左侧和右侧被挡住了。
因为main,sub,extra都处在浮动层，而且main是固定宽度，如果给main设置margin或者padding值，会因为其固有的宽度而撑开飞翼布局，直接影响到sub,extra的位置；
所以给main设置一个内层,为内层设置margin值

html:

<div class="main">
    <div class="main-content">
    </div>
</div>
<div class="sub"></div>
<div class="extra"></div>

css:

.main-content{margin:0 230px 0 190px;}

效果图：

关注

专栏目录