一、问题描述
二、问题解析
三、解决措施
（一）方法一：浮动float
（二）方法二：行内块inline-block属性
（三）方法三：弹性盒子flex
四、总结
一、问题描述
在网页开发过程中可能会有这样的布局需求，也就是需要让几个div水平显示在一行
假设高度都是100px，两边的宽度是230px，中间的宽度是500px
这个时候很容易想到以下的代码：
<!-- CSS样式 -->
<style>
.left {
width: 230px;
height: 100px;
background-color: #ffe6cc;
}
.middle {
width: 500px;
height: 100px;
background-color: #dae8fc;
}
.right {
width: 230px;
height: 100px;
background-color: #f8cecc;
}
</style>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>那么此时就会出现以下场景，即三个div无法并行，而是变成了一列
二、问题解析
出现该问题主要是由于div属于块级元素，每个div需要独占一个，所以不能显示在同一行，此时有三种解决措施。
三、解决措施
（一）方法一：浮动float
这是最容易想到的方法，设置div的float属性，可以使div脱离文档流，水平显示在一行，此时body中的代码不变，代码如下：
<!-- 设置浮动float -->
<style>
.left {
width: 230px;
height: 100px;
background-color: #ffe6cc;
float: left;
}
.middle {
width: 500px;
height: 100px;
background-color: #dae8fc;
float: left;
}
.right {
width: 230px;
height: 100px;
background-color: #f8cecc;
float: left;
}
</style>使用该方法的效果如下：
需要注意，每个div都需要设置浮动，不然则可能出现以下情况：
出现该情况是因为第一个div没有设置浮动，为了避免这种错误，可以将浮动作为公共属性类，并添加到各个div中，这种方法可以减少代码量（不需要每个div都写浮动属性），并将公共属性绑定到每个div上，代码如下：
<style>
.left {
width: 230px;
height: 100px;
background-color: #ffe6cc;
}
.middle {
width: 500px;
height: 100px;
background-color: #dae8fc;
}
.right {
width: 230px;
height: 100px;
background-color: #f8cecc;
}
.div-float {
float: left;
}
</style>
<body>
<div class="left div-float"></div>
<div class="middle div-float"></div>
<div class="right div-float"></div>
</body>最终效果如下：
为了进一步简化代码，还可以同时选中三个div的选择器，设置浮动属性，也能达到效果，代码如下，body部分代码不变：
<style>
.left,
.middle,
.right {
float: left;
}
.left {
width: 230px;
height: 100px;
background-color: #ffe6cc;
}
.middle {
width: 500px;
height: 100px;
background-color: #dae8fc;
}
.right {
width: 230px;
height: 100px;
background-color: #f8cecc;
}
</style>（二）方法二：行内块inline-block属性
div是块元素，块元素不能显示在一行，那么如果把div的display属性改为inline-block，也就是将div从块元素变为行内块元素，就可以使得div在同一行显示，代码如下：
<!-- 将div设为行内块元素 -->
<style>
.left,
.middle,
.right {
display: inline-block;
}
.left {
width: 230px;
height: 100px;
background-color: #ffe6cc;
}
.middle {
width: 500px;
height: 100px;
background-color: #dae8fc;
}
.right {
width: 230px;
height: 100px;
background-color: #f8cecc;
}
</style>最终效果如下：
这种情况下会出现间隔，可以采用多种方法删除
（三）方法三：弹性盒子flex
弹性盒子Flexbox是一种强大的布局模型，可以方便地实现水平和垂直布局。要将多个div放置在同一行上，可以将它们放置在一个具有Flexbox属性的父容器中，并设置其display属性设置为flex，还可以通过设置子元素的flex属性，可以调整它们的宽度和比例。
代码如下：
<style>
.container {
display: flex;
}
.left {
width: 230px;
height: 100px;
background-color: #ffe6cc;
}
.middle {
width: 500px;
height: 100px;
background-color: #dae8fc;
}
.right {
width: 230px;
height: 100px;
background-color: #f8cecc;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body> 最终效果：
四、总结
在HTML的排版设计中可能会遇到div不能为一行的情况，本文介绍了三种解决方法，提供了大致的思路，代码还有更好的优化措施
本文涉及到浮动、块级元素和行内块元素、弹性盒子多个知识点，后续会展开讲解，希望大家喜欢我的博客，谢谢！
