css常见布局

两列布局

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