几个div在一行的三种方法_div一行

作者：我家小花儿 | 2024-07-23 01:02:38

踩

div一行

几个div在一行的三种方法

在网页开发过程中总会有需求让几个div水平显示在一行，而正常情况下两个div默认是block，所以是不能显示在一行的，如下面显示：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
div {
height: 200px;
width: 200px;
}
.div-green {
background-color: green;
}
.div-red {
background-color: red;
}
</style>
</head>
<body>
<h1>normal div</h1>
<div class="div-green">div1</div>
<div class="div-red">div2</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上面代码执行的结果是：

在这里插入图片描述

下面我来介绍一下把几个div水平显示在一行的几种方法。

float

这是最容易想到的方法，设置div的float属性，可以使div脱离文档流，水平显示在一行，代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
　　body {
　　　　margin: 100px;
　　}
　　div {
　　　　height: 200px;
　　　　width: 200px;
　　}
　　.div-green {
　　　　background-color: green;
　　}
　　.div-red {
　　　　background-color: red;
　　}
　　.float-div {
　　　　float: left;
　　}
</style>
</head>
<body>
　　<h1>float div</h1>
　　<div class="div-green float-div">div1</div>
　　<div class="div-red float-div">div2</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

2.inline

既然div是因为其是块状元素才不能显示在一行，那么将display属性改为inline-block不就可以使其水平显示在一行了吗

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
　　body {
　　　　margin: 100px;
　　}
　　div {
　　　　height: 200px;
　　　　width: 200px;
　　}
　　.div-green {
　　　　background-color: green;
　　}
　　.div-red {
　　　　background-color: red;
　　}
　　.inline-div{
　　　　display: inline-block;
　　}
</style>
</head>
<body>
　　<h1>inline div</h1>
　　<div class="div-green inline-div">div1</div>
　　<div class="div-red inline-div">div2</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

显示结果如下图：
在这里插入图片描述

3.flex

flex和模型也是可以将两个div水平显示的，只要将div对应的父级元素的display属性设置为flex即可：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
　　body {
　　　　margin: 100px;
　　}
　　div {
　　　　height: 200px;
　　　　width: 200px;
　　}
　　.div-green {
　　　　background-color: green;
　　}
　　.div-red {
　　　　background-color: red;
　　}
　　.flex-div{
　　　　display: flex;
　　　　width: auto;
　　}
</style>
</head>
<body>
　　<h1>flex div</h1>
　　<div class="flex-div">
　　<div class="div-green">div1</div>
　　<div class="div-red">div2</div>
　　<div class="div-green">div3</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

显示结果：

在这里插入图片描述

与上面两种方法不同的是，上面两种方法是通过改变div自己的css来实现效果，而flex需要在父级设置display:flex,这点是需要注意的。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/867538