您的位置：首页 > 其它

两个及以上块级元素（div为例）排列一行

2016-01-11 22:35 274 查看

1.浮动解决（float）-------> _ >万能

demo代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body ,html { padding: 0px; margin: 0px;}
.box1,.box2 { width: 200px;height: 200px;float: left;}
.box1 { border: 1px solid #ff0000;}
.box2 { border: 1px solid #ffff00}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>

用浮动（float）定位可以完美兼容ie6，并且无中间留白。用金星老师的话就是-----完美！

ie6下效果图：

其他浏览器（这里是谷歌）：

对于另一种方法就是用display：即改如下代码

/*.box1,.box2 { width: 200px;height: 200px;float: left;}*/
.box1,.box2 { width: 200px;height: 200px;display: inline-block;}

下面看下ie6的效果图：

ie8及以上效果图：

其他浏览器（这里是谷歌）：

可以看到用display并不能兼容ie6，而且用display，中间会有留白，至于为什么，现在本宫还不造呢？

把css代码作如下改动：

.box1,.box2 { width: 200px;height: 200px;*display: inline;}

ie6，7效果图：

丢失了高宽度

ie8及以上，其他浏览器任然不能一行排列。
以上还遗留问题呢，原因下回分解，因为我也不造。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航