html设置两个div并列

直接说结论：两个div并列，核心就两件事——消除默认的设置块级独占行为，再给它们分配宽度。两个列实现方式至少有三种，设置但用的两个列场景不一样。

先看最常见的设置flex。父容器加display:flex，两个列子div自动排成一行。设置不需要算宽度，两个列flex会自己分配，设置除非你给子项设了flex-basis或百分比。两个列这是设置我最推荐的方式，因为不用清理浮动，两个列也不用担心inline-block带来的设置空白间隙。

但有些老项目还在用float。float本身不占位，父容器要加overflow:hidden或clearfix来撑开高度。代码里我用了width:calc(50% - 5px)，减去的5px是为了留出两个div之间的间隙。别小看这个减号——不减去间隙，右边那个div会掉到下一行。

还有一种老掉牙但偶尔会碰到的：inline-block。这玩意儿有个坑——HTML标签之间的换行符会被渲染成一个空格，导致两个div中间多出几像素空白。解决办法是父容器设font-size:0，再给子div单独设回字体大小。麻烦是麻烦，但如果你在邮件模板里写代码，inline-block反而比flex兼容性好。

实际工作里我遇到过一个情况：甲方要求两个div各占50%，但左边内容多、右边内容少。用flex默认拉伸，右边会空荡荡的。后来我给左边设了flex:2，右边flex:1，让宽度按内容比例分配——这比死板的width:50%灵活多了。另一个细节是垂直对齐：flex默认align-items:stretch，两边高度自动一致；float和inline-block则是各自的高度，底部可能不齐。

如果你只需要两个div并排，且不需要响应式，那flex最省心。但要是你维护的是十年前的老站，别犹豫，用float加clearfix。至于inline-block，除非你特别喜欢处理空格，否则别碰。

最后提一个很多人踩过的坑：子div设了width:50%，但没算上border或padding。默认的box-sizing:content-box会让实际宽度变成50%加上内边距，结果两个div总宽度超过100%，第二个被挤下去。全局设box-sizing:border-box能救你一次。