几个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水平显示在一行的几种方法。
- 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,这点是需要注意的。
