css打造自适应布局

最新推荐文章于 2011-08-03 19:32:51 发布

何东狮吼

最新推荐文章于 2011-08-03 19:32:51 发布

阅读量1.1k

点赞数

分类专栏： css IE6 文章标签： css float class 浏览器 ie 测试

本文链接：https://blog.csdn.net/hedong37518585/article/details/6646087

版权

css 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

IE6

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
*{
	margin:0;
	padding:0;
	color:#FFF;
}
.a{
	background:#FF0000;
	width:100%;
	float:left;
	margin-right:-100px;
}
.b{
	background:#006699;
	width:100px;
	float:right;
}
.c{
	background:#006666;
	margin-right:100px;
}
</style>
</head>

<body>
<div class="a"><div class="c">左</div></div><div class="b">右</div>
</body>
</html>

上面代码是右侧固定宽度，左侧自适应宽度，margin-right:-100px 也说明了浮动元素的尺寸是受margin影响的，上面a的宽度就是100%宽度再减去 100px

这里自适应是利用的浮动元素的尺寸可以通过margin来调整，如果给予margin-right负值，那么右侧将会裁去相应的宽度，这样就给右侧的固定宽度布局留出了相同大小的空间

这样视觉上是右侧固定浮动，左侧自适应的浮动，但是事实上如果没有c元素，而是直接把文字放到a中，文字是会跑到b的下面去的，所以我给a里面加上了c，并且不指定宽度，水平右侧外边距给100px，这样文字就不会再被覆盖，大家可以测试一下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>左右自适应宽度布局</title>
<style>
*{
	padding:0;
	margin:0;
}
#wrap{	
	background:#333;
}
#left{
	float:left;
	color:red;
	background:#33CC99;
	_margin-right:-3px;/*IE6 3pxBUG修复*/
}
#right{
	background:#ccc;
	height:1%;
	overflow:hidden;
}
</style>
</head>

<body>
<div id="wrap">
	<div id="left">left</div>
	<div id="right">右列宽度自适应布局</div>
</div>
</body>
</html>

上面代码中left和right的hasLayout的状态都是true，也就是说这2个元素都被触发了hasLayout，分别是通过float触发，height:1%触发（IE）overflow:hidden保护不被覆盖（FF CH等）

左侧浮动元素未指定大小会按照内部元素的大小来适应，左侧自适应成功（这就是浮动元素的包裹性）

右侧因为是块级元素，他的宽度如果没有指定应该是默认一行，而现在的一行已经被浮动元素占据了一些，剩余的部分浏览器也会帮我们计算好

这样一来，左右自适应宽度布局就成功了（利用了height:1%触发hasLayout和overflow:hidden来清除左侧浮动造成的影响，让浮动元素重新占据空间）

何东狮吼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css打造自适应布局

test*{ margin:0; padding:0; color:#FFF;}.a{ background:#FF0000; width:100%; float:left; margin-right:-100px;}.b{
复制链接

扫一扫

专栏目录