您的位置：首页 > 编程语言

【ibokan】双飞翼布局实现代码

2014-02-25 20:24 253 查看
        双飞翼布局是淘宝UED由国外圣杯布局优化而来的经典三栏布局解决方案，具有中栏html结构靠前且宽度自适应，侧栏宽度固定，且允许任何一栏为最高高度等优点。实现原理是先将中栏放好，然后让紧随其后的左右两栏利用margin负值强行挤到合适的位置。

       

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <style type="text/css">
    .main,.left,.right{float: left;height:200px;}
    .main{ background-color: blue;width:100%;}
    .left{background-color:gray;margin-left: -100%;}   <!-- 左侧margin-left数值与main的with百分比数值相同-->
    .right{background-color: yellow;width:50%;margin-left:-50%;}<!-- 右侧margin-left数值与with百分比相同-->
  </style>
</head>
<body>
  <div class="main">内容区域</div>
  <div class="left"> 左侧部分</div>
  <div class="right">右侧部分</div>
</body>
</html>



效果：



        
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTMl5 HTML5自由者 双飞翼布局 布局
相关文章推荐
新的分享
章节导航