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

        双飞翼布局是淘宝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>


效果:




        

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
双飞翼布局是一种常见的三栏布局,它可以让中间内容自适应宽度,左右两侧宽度固定并且可以放置固定宽度的元素。下面是一个基于 CSS 的双飞翼布局示例: HTML 结构: ``` <div class="container"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> <div class="middle">中间内容</div> </div> ``` CSS 样式: ``` .container { width: 100%; overflow: hidden; } .left, .right, .middle { float: left; height: 200px; } .left { width: 200px; background-color: #ccc; margin-left: -100%; } .middle { width: 100%; background-color: #eee; } .right { width: 200px; background-color: #ccc; margin-left: -200px; } ``` 解释: - 容器 `.container` 设置 `overflow: hidden` 以防止浮动元素溢出。 - 左侧 `.left`、右侧 `.right` 和中间 `.middle` 这三个元素都设置了 `float: left` 让它们在同一行排列。 - 左侧 `.left` 和右侧 `.right` 的宽度都是固定的,中间 `.middle` 的宽度设置为 100%,这样中间内容就可以自适应宽度。 - 左侧 `.left` 设置 `margin-left: -100%`,这样它的左边距就等于它自身宽度的负值,相当于左侧内容向左移动了一个 `.left` 的宽度,让它的位置在中间内容的左侧。 - 右侧 `.right` 设置 `margin-left: -200px`,这样它的左边距就等于它自身宽度的负值,相当于右侧内容向左移动了一个 `.right` 的宽度,让它的位置在中间内容的右侧。 这样就实现了一个基于 CSS 的双飞翼布局
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值