淘宝双飞翼布局,左右固定中间自适应宽度。

1、淘宝双飞翼的优点:
①、重要的内容先加载;
②、兼容目前所有的主流浏览器,包括IE6。

HTML结构:

<div class="wrapper">
    <div class="middle-wrap">
        <div class="middle">自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应宽度自适应.div>
    div>
    <div class="left">固定宽100pxdiv>
    <div class="right">固定宽100pxdiv>
div>

css代码

.wrapper { width: 100%;}

.left, .right { float: left; width: 100px; height: 400px; background: green;}

.left { margin-left: -100%; }

.right { background: cadetblue; margin-left: -100px; }

.middle-wrap { float: left; width:100%;}

.middle{ margin:0 110px; background: pink;}

效果
淘宝双飞翼布局,左右固定中间自适应宽度。_第1张图片

你可能感兴趣的:(css-自适应宽度)