实现三个div同一行显示，IE6 and Ie7 :display:inline-block

最新推荐文章于 2021-07-09 09:41:26 发布

Marcia_gm

最新推荐文章于 2021-07-09 09:41:26 发布

阅读量836

点赞数

分类专栏：开发

本文链接：https://blog.csdn.net/u012767697/article/details/18304949

版权

开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

IE6、IE7不支持display:inline-block

div
{
    display:inline-block;
    *display:inline;
    *zoom:1;
}

 display:inline-block;和*display:inline;的顺序不要颠倒哦！

代码如下：

第一种:使用display:inline-block

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exercise of inline.</title>
<style>
#divA, #divB, #divC {
	margin:0; 
	width:300px; 
	height:200px; 	
	display:inline-block;
	*display:inline;
	*zoom:1;
	padding:0;
}
#divA {background-color:#FF0000;height:300px;}
#divB {background-color:#00FF00;}
#divC {background-color:#0000FF;}
#divD {background-color:#99FF22;width:500px; height:200px;}
</style>
</head>
<body>
<div id="divA">A</div>
<div id="divB">B</div>
<div id="divC">C</div>
<div id="divD"> D</div>
</body>
</html>

第二种：使用float:left

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exercise of float.</title>
<style>
#divA, #divB, #divC {width:300px; height:200px; float:left;margin:1px;}
#divA {background-color:#FF0000;height:300px;}
#divB {background-color:#00FF00;}
#divC {background-color:#0000FF;}
#divD {background-color:#99FF22;width:500px; height:200px;clear:left;}
</style>
</head>
<body>
<div id="divA">A</div>
<div id="divB">B</div>
<div id="divC">C</div>
<div id="divD"> D</div>
</body>
</html>