用 display: inline-block 是最直接兼容的方式，适合按钮等需块级特性的元素；flex 布局更精细可控，适合复杂对齐与响应式；避免使用 float，因其易引发高度塌陷等问题。
用 display: inline-block 让两个元素并排
这是最直接、兼容性最好的方式，尤其适合按钮、标签、小图标这类需要保持自身块级特性的元素。
- 两个元素都加
display: inline-block，它们就会像文字一样从左到右排列 - 注意默认有换行符或空格造成的间隙，可以删 HTML 中的换行/空格，或设父容器
font-size: 0（子元素再单独设字体大小） - 垂直对齐默认是基线对齐（
vertical-align: baseline），常导致“一高一低”，改成vertical-align: top更可控 - IE8+ 支持，无 JS 依赖，适合静态布局场景
用 flex 布局控制更精细的同行排列
当你要控制间距、对齐方向、换行策略，或者元素数量不固定时，flex 是首选。
- 给父容器设
display: flex，子元素自动同行，无需改子元素样式 - 用
justify-content控制水平分布（比如space-between拉开两端），用align-items控制垂直对齐（如center居中） - 如果两个元素宽度超了容器，默认会压缩（
flex-shrink: 1），想避免可设flex-shrink: 0 - 注意 Safari 旧版本（iOS 8/9）对
flex-wrap和某些属性支持不全，纯两元素并排一般没问题
为什么不用 float？
float 确实能让元素同行，但它带来的副作用远多于收益，现在基本不该用。
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
- 父容器高度塌陷：浮动元素脱离文档流，父容器可能显示为 0 高度，得额外清浮（
clear: both或overflow: hidden） - 影响后续非浮动元素的布局，容易引发意外重叠或错位
- 响应式下难以控制行为，比如在小屏想堆叠时，
float很难优雅退化 - 现代浏览器都支持
flex和grid，float仅建议用于纯文本环绕图片这种经典场景
两个元素同行但宽度自适应？小心 width 和 box-sizing
看起来只是“放一起”，但实际宽度计算出错，是同行失败最隐蔽的原因。
立即学习“前端免费学习笔记（深入）”；
- 如果给两个子元素都设了
width: 50%，但又加了padding或border，默认box-sizing: content-box会让总宽超 100%，第二元素就掉行 - 统一加
box-sizing: border-box，让 padding/border 包含在 width 内，避免意外溢出 - 用
flex时，width不一定生效（被flex-basis覆盖），想严格控宽，优先用flex: 0 0 50% - 百分比宽度在父容器
display: inline-block或未设宽时，可能计算为 0，务必确认父容器有明确宽度来源
