如何让两个div处于一行

最新推荐文章于 2023-04-13 10:41:33 发布

调皮的芋头

最新推荐文章于 2023-04-13 10:41:33 发布

阅读量1.6w

点赞数 3

分类专栏： css3 HTML5 文章标签： div布局 div不换行

本文链接：https://blog.csdn.net/hw1287789687/article/details/45275993

版权

css3 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML5

4 篇文章 0 订阅

订阅专栏

我们知道 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>

运行效果:
这里写图片描述
注意:
(1)为什么要使用display: inline-block;而不是display: inline;,因为display: inline导致元素的height和width样式失效.
(2)这两种方式的显示效果并不是完全一样的,为什呢?
方式二中两个div中会有大小为8px的margin,这是从哪里来的呢?是从body继承过来的.
这里写图片描述

调皮的芋头

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
如何让两个div处于一行

我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的例如:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>让两个div处于同一行</title></head><body><div style="height: 40px;width: 80px;bac
复制链接

扫一扫

专栏目录