平时做项目中总是能碰到让多个div显示在一排的问题
例如：

将上图显示为:

其实有很多种方法都可解决此问题
在这里做一下总结

一、使用 display

也就是说块元素占用了全部宽度，前后会带有换行符，会自动的在一行显示，而内联元素只需要设置宽度，不会带有换行符，也就是默认不换行

那么我们就可以考虑把 div 这种块元素转换为内联元素 即可实现 div 在一行显示，就可达到我们的目的

display有很多属性值 如下：

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性弹性盒显示。（弹性盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性弹性盒显示。（弹性盒最老版本）（CSS3）
flexbox：将对象作为弹性弹性盒显示。（弹性盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性弹性盒显示。（弹性盒过渡版本）（CSS3）
flex：将对象作为弹性弹性盒显示。（弹性盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性弹性盒显示。（弹性盒最新版本）（CSS3）

那我们只需要关注以下几个：
display: inline、display: block、display: inline-block display: box

1. display: inline（将对象指定为内联元素）

就可以在div等块元素的 css 样式种添加 display: inline，即可将div转换为内联元素，就可以在一行显示；
同理，若要将 内联元素 转换为 块元素 显示，可以添加 display: block
display: inline-block 同理

2. display: box （将对象作为弹性弹性盒显示）

在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block。
可在其子代设置如下属性：（具体讲解可参考：display: box)

1.box-flex:number
\qquad （1）占父级元素宽度的number份
\qquad （2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数
\qquad （3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份
2.box-orient:horizontal/vertical
\qquad 在父级上设置该属性，则子代按水平排列或竖直排列。
\qquad 注：所有主流浏览器不支持该属性，必须加上前缀。
\qquad （1）horizontal 水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
\qquad （2）vertical 垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。
3.box-direction:normal/reverse
\qquad 在父级上设置该属性，确认子代的排列顺序。
\qquad （1）normal 默认值，子代按html顺序排列
\qquad （2）reverse 反序
4.box-align:start/end/center/stretch
\qquad 在父级设置，子代的垂直对齐方式。
\qquad （1）start 垂直顶部对齐
\qquad （2）end 垂直底部对齐
\qquad （3）center 垂直居中对齐
\qquad （4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。
5.box-pack:start/end/center
\qquad 在父级设置，子代的水平对齐方式。
\qquad （1）start 水平左对齐
\qquad （2）end 水平右对齐
\qquad （3）center 水平居中对齐

由于子元素 box-orient 的默认值是 box-orient:horizontal（即子元素水平排列），那么只需要在父元素上设置 display: box即可实现 div 水平排列的效果

二、使用 float

float: left 靠页面的左边并排显示

对div设置一个float浮动属性就可以让 div 并排显示，只要并排div盒子总宽度小于或等于最外层盒子宽度即可

<div style="float:left;">div1</div>
<div style="float:left;">div2</div>
<div style="float:left;">div3</div>