请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

css布局,左边固定尺寸,右边自适应

 
今天遇到这个问题,做一个左边固定尺寸,右边自适应网页布局,起初我是用js来记算控制又边的尺寸的

后来发现,js的加载慢一些,网页打开会抖动一下,解决这个问题我又不想用css3,怕兼容性不好

后面只用了css做了一下调整解决了这个问题,发现代更简单,兼容性也很好



html代码

<div id="main">

    <div id="left"></div>

    <div id="right"></div>

</div>
[CSS] 纯文本查看 复制代码
#main{
    overflow:hidden;  /* 让主体部份高度能自适应 */

}


#left{
	width:200px;
	float:left;  /* 左浮 */
}


#right{
	margin-left:200px;  /* 往左边挤出 左边div 的宽度 */
}

原理很简单

main主框架,用overflow:hidden, 让他子元浮即使浮动了高度也能自适应,

left左框架浮动后其实是没有占位置的,等于高度是0

right右框架宽度是没有做限制,默认是占了100%,挤出左框架的宽度,剩下的都是自已的宽度

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。