如何让两个div处于一行

hw1287789687

浏览: 5184082 次
性别:
来自: 北京

最近访客更多访客>>

rbaggio10

zcm1205

morelily

beisika10368

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java Web
css

div不换行 div处于一行 inline-block div行内行内样式

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

例如:

<!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

<!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

<!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>

运行效果: