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

1.浮动解决(float)-------> _ >万能

demo代码:

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">box1div>
    <div class="box2">box2div>
body>
html>
用浮动(float)定位可以完美兼容ie6,并且无中间留白。用金星老师的话就是-----完美!

ie6下效果图:

两个及以上块级元素(div为例)排列一行_第1张图片

其他浏览器(这里是谷歌):

两个及以上块级元素(div为例)排列一行_第2张图片

对于另一种方法就是用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及以上,其他浏览器任然不能一行排列。

以上还遗留问题呢,原因下回分解,因为我也不造。

你可能感兴趣的:(前端之css)