博客前言：

做为一个程序员，在复杂的工作环境中总要学着去承担更多的责任，和接触更广泛的知识。然而在接触新区域时，一个小白总是为自己能钻研出一点点东西感到十分兴奋，为了让这份成就感附属的知识点留给自己，决定记录下来这些小知识点（敲黑板，期末要要考…）。可以方便以后查阅，还有可能分享给遇到同样问题的同学们。

前端知识点（一）：多个并行的DIV实现高度一致

我的前端启蒙来源于工作初期的一个内部分享会，从此就记住了用 float来控制DIV的浮动。而这个也成为后来我遇到如标题所示的问题的原因。前端做为实现网页外观的最基础也是最重要的语言，其实并没有那么容易，尤其像我这种没有系统学习而是遇到问题随手百度乱试的，只要能解决就不考虑解决的原理以及对未来的支持和适应。但是在工作中真的很难有时间去静下心来研究本末。回到本篇的主题，当我去创建一个页面结构是如下图所示的样子：

简而言之我的思路就是将DIV1和DIV2都给予浮动：float: left; 由于DIV1和DIV2的内容都是后台提供的动态数据，不是静态元素那就很难去给一个固定的高度控制DIV。然后由于需求需要两个DIV的内容保持高度一致，试了n种调整高度height的方法都没办法得到满意的效果。于是想起了table是可以达到同行元素保持同样高度的效果，如果有一个元素高度变化整行元素都会适应成同一个高度。由于已经把后台取数据的逻辑嵌进去还有很多内部的元素样式已经写好了，改成table来实现会是一个推到重来的过程。于是四处百度，发现有大神在只言片语中提到了display：table-cell这个属性可以实现类似的效果。于是开始了尝试：

给外层DIV 添加CSS属性： display： table；

给DIV的子元素DIV1和DIV2添加属性： display：table-cell；

然后并没有达到高度一样的效果… 于是尝试将子元素的浮动（float: left;）拿掉，成功了~

终于解决了这个问题，原来在用display：table； 以及display：table-cell；来用div嵌套来实现table的样式时，子元素不需要用浮动来控制。

（本篇是两个DIV子元素为例，实际可以用于多个DIV子元素。）