css中的各种布局写法（不定期更新）
2021-06-29 06:05
标签：兼容性 固定 理解 流行 宽度 roc bsp title 浮动 前端做久了越来越感觉css的博大精深，虽然css严格意义上算不上是一门编程语言，比如逻辑控制、循环操作、函数等都严重缺少或不足，尽管目前有了很流行的sass、less等css预处理器以便于编写css，但是实际上css的难处在于它的特性，css的属性毕竟太多了，每种属性还有不同的值，效果也各不相同。也难怪不少精通各种语言的大神看到css就头痛（比如这位） 在此总结一下遇到过的常见布局方式 1、左侧固定，右侧宽度自适应 （1）通过浮动 https://jsfiddle.net/tgxh/yua2q93b/ （2）通过绝对定位 https://jsfiddle.net/tgxh/w1q7e0c1/ （3）通过BFC规则 https://jsfiddle.net/tgxh/vjqg1z11/ 关于BFC规则，可以参考 深入理解BFC和Margin Collapse （4）使用flex（在移动端使用或者不考虑兼容性的话强烈推荐此方法） https://jsfiddle.net/tgxh/ramoooLy/ 1、左侧固定，中间和右侧各占剩余空间的50% 这个跟两列类似，只是右侧的再分成两列布局 右侧使用浮动 https://jsfiddle.net/tgxh/Lewv6axa/ 右侧使用inline-block（如果两个div有换行，中间的空格是一个inline-block元素，也会占据空间，所有如果两个div设置为inline-block且宽度都是50%，那么会超出一行） 办法1：删除两个div的空格 https://jsfiddle.net/tgxh/bt8nv1f2/ 办法2：父元素设置font-size为0，子元素另外设置font-size https://jsfiddle.net/tgxh/gggzs3gw/ 办法3：flex https://jsfiddle.net/tgxh/cdjr13jv/ css中的各种布局写法（不定期更新） 标签：兼容性 固定 理解 流行 宽度 roc bsp title 浮动 原文地址：http://www.cnblogs.com/tgxh/p/7141456.html两列布局
三列布局