两列布局
1、flex
2、float
3、position: absolute
三列布局
1、flex
2、float(圣杯布局，双飞翼布局)
3、position: absolute
圣杯布局
1、注意html结构是 main-> left -> right 把重要的内容放在前面，有利于seo
2、父级padding
3、三个元素都是float
<div class="container"><div class="center"></div><div class="left"></div><div class="right"></div>
</div>
.container {width: 100%;height: 300px;padding-left: 200px;padding-right: 100px;box-sizing: border-box;
}
.container > div {float: left;height: 300px;
}
.center {width: 100%;background: red;
}
.left {background: yellow;width: 200px;float: left;position: relative;left: -200px;margin-left: -100%;
}
.right {background: blue;width: 100px;float: left;position: relative;left: 100px;margin-left: -100px;
}
双飞翼
1、注意html结构是 main-> left -> right 把重要的内容放在前面，有利于seo
2、center margin
3、三个元素都是float
<div class="container"><div class="center"></div><div class="left"></div><div class="right"></div>
</div>
.container {width: 100%;height: 300px;box-sizing: border-box;
}
.container > div {float: left;height: 300px;
}
.center {width: 100%;margin-left: 200px;margin-right: 100px;background: red;
}
.left {background: yellow;width: 200px;float: left;position: relative;margin-left: -100%;
}
.right {background: blue;width: 100px;float: left;position: relative;margin-left: -100px;
}
或者
<div class="container"><div class="wrapper"><div class="center">center</div></div><div class="left">left</div><div class="right">right</div>
</div>
.container {width: 100%;height: 300px;
}.container > div {float: left;height: 300px;
}.wrapper {width: 100%;
}.center {height: 300px;margin-left: 200px;margin-right: 100px;background: red;
}.left {background: yellow;width: 200px;float: left;position: relative;margin-left: -100%;
}.right {background: blue;width: 100px;float: left;position: relative;margin-left: -100px;
}
瀑布流
列高可变且列内元素顶部对齐。
使用 CSS 列（Columns）
CSS3 引入了多列布局（column-count 和 column-gap 属性），可以用来实现简单的瀑布流效果。
这个效果是从上往下，然后再从左往右。
<div class="container"><div class="item">内容1</div><div class="item">内容2</div><!-- 更多内容 -->
</div>
.container {column-count: 3; /* 定义列数 */column-gap: 16px; /* 定义列与列之间的间隙 */
}
.item {break-inside: avoid; /* 避免在元素内进行分列 */margin-bottom: 16px; /* 定义元素之间的间隙 */
}
flex box
没法跨行堆叠
使用js计算
计算位置+使用position: absolute
实现可参考文档：https://juejin.cn/post/7357546247848378406
