IFE：第9天双飞翼布局

最新推荐文章于 2024-04-23 09:30:56 发布

tlewa

最新推荐文章于 2024-04-23 09:30:56 发布

阅读量133

点赞数

原文链接：https://www.cnblogs.com/langzs/archive/2013/01/27/taobaoshuangfeiyi.html

版权

双飞翼布局

三列布局中，如果想要将主要内容main优先加载优化，则DOM如下所示

<div class="grid-s5m0e5">
　　<div class="col-main">我是主列</div>
　　<div class="col-sub">我是子列</div><br>　　
    <div class="col-extra">我是附加列</div>
</div>

但又想将主要内容在中间位置显示，便有如下css

.grid-s5m0e5 { float:left; width:100%; }
.grid-s5m0e5 .col-main { float:left; width:100%; min-height:30px; background:#000; }
.col-sub { float:left; width:190px; min-height:30px; background:#f00; margin-left:-100%; }
.col-extra { float:left; width:190px; min-height:30px; background:#00f; margin-left:-190px; }

下面逐行分析一下：
第1行：grid-s5m0e5 是一个布局框的名称，我们为其定义了宽度100%（在IE6一不定义100%时，有点小问题，亲们自己可以一试）

第2行：col-main 【主列】：浮动左侧，宽度100%（宽度全让它给占了，左右两侧的层该怎么办？）

第3行：col-sub 【子列】：浮动左侧，宽度190，左边界为-100%（此处是关键：浮动情况下，负边界值会导致DIV上移，而使用-100%可以确实它移动到最左侧。）

第4行：col-extra 【附加列】：左浮动，宽度190，左边界为-190px（道理同上，注意的是，负左边界一定要大于或等于该DIV的宽度，才能靠到上一行去）

让我们看看效果

[外链图片转存失败(img-88Ux01Vx-1567007078264)(C:\Users\郑靓\AppData\Roaming\Typora\typora-user-images\1565423970941.png)]

但这样布局后发现主列中的文字不见了，经过DOM分析发现，原来是被col-sub挡住了，那么如何给main正确的定位呢。

下面是淘宝的做法：

1、DOM结构的改变：在.col-main下再次添加一个 .main-wrap【这就是淘宝的布局中col-main下有一个main-wrap，而col-sub下却没有sub-wrap的原因，我猜的^_】

2、利用CSS调整.main-wrap的位置。【这里很简单，就是把左右被挡住的部分，设置为main-wrap的左右边界即可】

<div class="grid-s5m0e5">
    <div class="col-main">
        <div class="main-wrap">
            我是主列，出来吧！
        </div>
    </div>
    <div class="col-sub">我是子列</div>
    <div class="col-extra">我是附加列</div>
</div>

.grid-s5m0e5 { width:100%; margin-right:auto; margin-left:auto; }
.grid-s5m0e5 .col-main { float:left; width:100%; min-height:30px; background:#000; }
.grid-s5m0e5 .col-main .main-wrap {
    margin-left:200px;  /*与col-sub产生10像素距离*/
    margin-right:200px; /*与col-extra产生10像素距离*/
    background:#0f0;
    min-height:30px;
}
.col-sub { float:left; width:190px; min-height:30px; background:#f00; margin-left:-100%; }
.col-extra { float:left; width:190px; min-height:30px; background:#00f; margin-left:-190px; }