⼏个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不就可以使其⽔平显⽰在⼀⾏了吗
  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即可：
  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，这点是需要注意的。
>html的flex布局

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。