关于css布局中左侧固定右侧自适应的几种方法

来源：互联网发布：淘宝店铺怎么申请编辑：程序博客网时间：2024/06/01 10:50

第一种：float 单一层浮动法

例如：左侧固定成100px; 则核心代码左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px;

实例：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>z-index</title><style type="text/css">*{margin:0;padding:0;}.container{height:200px;}.left{width:100px;border-right:none;height:50px;float:left;background-color:yellow;}.right{margin-left:100px;width:auto;height:100px;background-color:blue;}</style></head><body>    <div class="container">    <div class="left"></div>    <div class="right"></div>    </div></body></html>

绝大浏览器是没有任何问题的，除了万恶的浏览器IE6，两层中间有缝隙 3px;

第二种定位，在固定元素上加入绝对定位，自适应元素设置成margin-left:固定元素的宽度

实例：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>z-index</title><style type="text/css">*{margin:0;padding:0;}.container{height:200px;}.left{width:100px;height:50px;background-color:blue;position:absolute;left:0;top:0;}.right{margin-left:100px;height:100px;background-color:yellow;}</style></head><body>    <div class="container">    <div class="left">left</div>    <div class="right">right</div>    </div></body></html>

主流浏览器都是支持的包括IE6，除了这些还可以进行扩展例如：，在两个元素加上border，就可以实现，如果采用第一种方法 IE7 是不支持显示的效果会是这样。

所以说第二种还是不错的，不少大家都会误解有时候在float和定位都可以实现的时候，到底要采用哪种方式，我觉得那要看你想要兼容哪种浏览器，主流的（非IE6）两种都很不错，但是IE中关于float的bug 太多，还是能不用尽量不用定位我还是没有发现什么bug

0 0