几个div在一行的三种方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
⼏个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>
上⾯代码执⾏的结果是：
下⾯我来介绍⼀下把⼏个div⽔平显⽰在⼀⾏的⼏种⽅法。
1. 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>
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>
显⽰结果如下图：
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>
显⽰结果：
与上⾯两种⽅法不同的是，上⾯两种⽅法是通过改变div⾃⼰的css来实现效果，⽽flex需要在⽗级设置display:flex,这点是需要注意的。