如何让两个div处于一行-阿里云开发者社区

如何让两个div处于一行

2016-05-10 1351

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的

例如:

   Html代码  
    
  
<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>让两个div处于同一行</title>  
</head>  
<body>  
<div style="height: 40px;width: 80px;background-color: #006ba4" >  
    div1  
</div>  
<div style="height: 40px;width: 70px;background-color:chartreuse" >  
    div2  
</div>  
</body>  
</html>  

浏览器效果:

那么如何让两个相邻的div在同一行呢?

有两种方式

方式一:使用float

   Html代码  
    
  
<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>让两个div处于同一行</title>  
    <style>  
        div{  
            float: left;  
        }  
    </style>  
</head>  
<body>  
<div style="height: 40px;width: 80px;background-color: #006ba4" >  
    div1  
</div>  
<div style="height: 40px;width: 70px;background-color:chartreuse" >  
    div2  
</div>  
</body>  
</html>  

运行效果:

方式二:使用inline-block

   Html代码  
    
  
<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>让两个div处于同一行</title>  
    <style>  
        div{  
            display: inline-block;  
        }  
    </style>  
</head>  
<body>  
<div style="height: 40px;width: 80px;background-color: #006ba4" >  
    div1  
</div>  
<div style="height: 40px;width: 70px;background-color:chartreuse" >  
    div2  
</div>  
</body>  
</html>  

运行效果:

注意:

(1)为什么要使用display: inline-block;而不是display: inline;,因为display: inline导致元素的height和width样式失效.

(2)这两种方式的显示效果并不是完全一样的,为什呢?

方式二中两个div中会有大小为8px的margin,这是从哪里来的呢?是从body继承过来的.

如何让两个div处于一行

热门文章

最新文章

相关电子书