例子：让两个div排列在同一行
给div添加float样式
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<style>
div{
float:left;
}
</style>
</head>
<body>
<divstyle="height:40px;width:80px;background-color:red">
div1
</div>
<divstyle="height:40px;width:70px;background-color:grey">
div2
</div>
</body>
</html>
说明：让div和span排列在一起也可以用上述上方法
例子：让div和两个span排列在同一行
额外要求，然第二个span排列在最右侧
使用display-inline（为什么要使用display:inline-block;而不是display:inline;是因为display:inline导致元素的height和width样式失效）
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<style>
div,span{
display:inline-block;
}
.span2{
float:right
}
</style>
</head>
<body>
<divstyle="height:40px;width:80px;background-color:red">
div1
</div>
<spanstyle="height:40px;width:70px;background-color:blue">
span1
</span>
<spanclass="span2"style="height:40px;width:70px;background-color:grey">
span2
</span>
</body>
</html>
运行结果
说明：第一个div和第一个span之间存在空白间隙，那是因为div元素和span元素之间存在换行等空白，去除即可，如下
<divstyle="height:40px;width:80px;background-color:red">
div1
</div><spanstyle="height:40px;width:70px;background-color:blue">
span1
</span>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55084.shtml
