艾Q网

标题: css布局，左边固定尺寸，右边自适应 [打印本页]

作者: admin 时间: 2023-10-25 12:10
标题: 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%，挤出左框架的宽度，剩下的都是自已的宽度

欢迎光临艾Q网 (http://js.iqi123.com/bbs/)