div是块级元素,是自上而下、垂直排列会占满一行且具有自动换行功能。
方法一:使用flex自适应
<div class="all"><div class="a"></div><div class="b"></div><div class="c"></div></div>
.all{display: flex; /*给父元素设置flex*/}.a,.b,.c{width: 300px;height: 100px; }.a{background-color: black;}.b{background-color: background-color:pink;}.c{background-color: red;}
方法二:使用float浮动方式
<div class="a"></div><div class="b"></div><div class="c"></div>
.a,.b,.c{width: 300px;height: 100px; float: left;/*使三个div向左浮动*/}.a{background-color: black;}.b{background-color:pink;}.c{background-color: red;}