双飞翼DOM结构布局将主体container内部布局了三个模块，wrap包裹的main、left左侧边栏、right右侧边栏，wrap模块设置成100%宽度，main的div设置左右padding200px，left、right边栏宽度设置成200px，将class为wrap、left、right的div设置向左浮动，三个模块就浮动到一行（由于屏幕宽度会自动换行显示，宽度够大是在一行）。然后将class为left的div左边距向左偏移100%宽度，将right的div左边距向左偏移200px宽度。圣杯布局同理，都可以利用浮动实现。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style.css"> <title>新千年板材 - 精品***，亲民价格</title> </head> <body> <!-- 头部 --> <div class="header"> <!-- 头部内容区 --> <div class="content"> <ul class="nav"> <li class="item"><a href="">网站首页</a></li> <li class="item"><a href="">关于我们</a></li> <li class="item"><a href="">产品中心</a></li> <li class="item"><a href="">新闻中心</a></li> <li class="item"><a href="">销售网点</a></li> <li class="item"><a href="">加入我们</a></li> <li class="item"><a href="">防伪查询</a></li> <li class="item"><a href="">联系我们</a></li> </ul> </div> </div> <div class="slider"> <img src="static/images/1.jpg" alt=""> </div> <!-- 主体 --> <div class="container"> <!-- 双飞翼DOM结构 --> <!-- 主体 --> <div class="wrap"> <div class="main"> <h1>产品展示</h1> <div class="product"> <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a> <p>苏香桐</p>价格： <span>250</span> 销量： <span>150</span> <a href="#"></a> <div class="shop">点击***</div> </a> </div> <div class="product"> <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a> <p>苏香桐</p>价格： <span>250</span> 销量： <span>150</span> <a href="#"></a> <div class="shop">点击***</div> </a> </div> <div class="product"> <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a> <p>苏香桐</p>价格： <span>250</span> 销量： <span>150</span> <a href="#"></a> <div class="shop">点击***</div> </a> </div> <div class="product"> <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a> <p>苏香桐</p>价格： <span>250</span> 销量： <span>150</span> <a href="#"></a> <div class="shop">点击***</div> </a> </div> <div class="product"> <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a> <p>苏香桐</p>价格： <span>250</span> 销量： <span>150</span> <a href="#"></a> <div class="shop">点击***</div> </a> </div> <div class="product"> <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a> <p>苏香桐</p>价格： <span>250</span> 销量： <span>150</span> <a href="#"></a> <div class="shop">点击***</div> </a> </div> <div class="product"> <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a> <p>苏香桐</p>价格： <span>250</span> 销量： <span>150</span> <a href="#"></a> <div class="shop">点击***</div> </a> </div> <div class="product"> <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a> <p>苏香桐</p>价格： <span>250</span> 销量： <span>150</span> <a href="#"></a> <div class="shop">点击***</div> </a> </div> </div> </div> <!-- 左侧边栏 --> <div class="left"> <h1>产品列表</h1> <ul> <li><a href="">免漆板</a></li> <li><a href="">石膏板</a></li> <li><a href="">细木工板</a></li> <li><a href="">饰面板</a></li> <li><a href="">osb板</a></li> </ul> </div> <!-- 右侧边栏 --> <div class="right"> <h1>热销产品</h1> <ul> <li> <a href="#"> <img src="static/images/爱马士橙.jpg" alt=""> </a> <p>苏香桐</p> </li> <li> <a href="#"> <img src="static/images/爱马士橙.jpg" alt=""> </a> <p>苏香桐</p> </li> <li> <a href="#"> <img src="static/images/爱马士橙.jpg" alt=""> </a> <p>苏香桐</p> </li> <li> <a href="#"> <img src="static/images/爱马士橙.jpg" alt=""> </a> <p>苏香桐</p> </li> </ul> </div> </div> <!-- 底部 --> <div class="footer"> <!-- 底部内容区 --> <div class="content"> <p> <a href="">©新千年板材所有</a> | <a href="">0571-83525119</a> | <a href="">浙ICP备案123***666</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.wrap {
width: 100%;
background-color: lightblue;
}
.wrap,
.left,
.right {
float: left;
}
.container {
overflow: hidden;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
关于产品展示和热销产品也是采用流体布局，只要将单个产品div的显示样式设置成display: inline-block;就可以自动排序，不过要计算好单个div的宽度和高度，
实例
.wrap .main .product {
display: inline-block;
width: 320px;
height: 370px;
background-color: white;
font-size: 1.2rem;
text-align: center;
box-shadow: 2px 2px 2px #444444;
margin-left: 3px;
margin-bottom: 7px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞翼DOM结构布局需要将主体设置.container {overflow: hidden;}，消除class为wrap、left、right的div设置向左浮动影响，产品展示也可以采用将产品模块设置成向左浮动来实现。