经常运用体式格局排列
- float
- absolute
- table
- flex
- grid
float
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
.container {
overflow: auto;
}
.left {
width: 200px;
float: left;
background-color: #1ABC9C;
}
.right {
width: 200px;
float: right;
background-color: #2ECC71;
}
.center {
margin-left: 200px;
margin-right: 200px;
background-color: #3498DB;
}
上面完成体式格局长处,完成简朴兼容性好
瑕玷:依据衬着的划定规矩,从上到下,也就是说left和right会优先衬着, center部分会末了衬着.
优化体式格局-1
应用负margin来完成
<div class="container">
<div class="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
overflow: auto;
}
.left,
.right,
.center {
box-sizing: border-box;
}
.left {
width: 200px;
float: left;
background-color: #1ABC9C;
margin-left: -100%;
}
.right {
width: 200px;
float: right; // float:left;
background-color: #2ECC71;
margin-left: -200px;
}
.center {
float: left;
width: 100%;
padding-left: 200px;
padding-right: 200px;
background-color: #3498DB;
}
完成前面主要内容优先加载题目,然则又有新题目,当主体内容太长的时,发明背景(边框、背景图等等)影响到了两侧
假如只处置惩罚背景题目能够运用下面体式格局
.center {
background-clip: content-box
}
假如有边框、背景图片等明显上面不能满足。
优化体式格局二 (圣杯规划)
<div class="container">
<div class="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
margin:0 200px;
position: relative;
}
.left,
.right,
.center {
box-sizing: border-box;
}
.center {
float: left;
width: 100%;
background-color: #3498DB;
}
.left {
position: relative;
left:-200px;
float: left;
width: 200px;
margin-left: -100%;
background-color: #1ABC9C;
}
.right {
position: relative;
right:-200px;
float: right;
width: 200px;
margin-left: -200px;
background-color: #2ECC71;
}
优化体式格局三: (双飞翼规划) 给 center 元素包裹一个容器
<div class="container">
<div class="center-warpper">
<div class="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
overflow: auto;
}
.left,
.right,
.center,
.center-warpper {
box-sizing: border-box;
}
.center-warpper {
float:left;
width: 100%;
padding-left: 200px;
padding-right: 200px;
}
.center {
width: 100%;
overflow: auto;
background-color: #3498DB;
}
.left {
width: 200px;
float: left;
background-color: #1ABC9C;
margin-left: -100%;
}
.right {
width: 200px;
float: right;
background-color: #2ECC71;
margin-left: -200px;
}
处置惩罚体式格局二和三处理体式格局异常相似,只是处置惩罚的细节不一样. 详细用谁人都能够平常引荐用前者
absolute
<div class="container">
<div class="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
position: relative;
}
.left,
.right,
.center {
box-sizing: border-box;
}
.center {
position: absolute;
left: 200px;
right: 200px;
background-color: #3498DB;
}
.left {
position: absolute;
left: 0;
width: 200px;
background-color: #1ABC9C;
}
.right {
position: absolute;
right: 0;
float: right;
width: 200px;
background-color: #2ECC71;
}
table
<div class="container">
<div class="left">left</div>
<div class="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div class="right">right</div>
</div>
.container {
position: relative;
display: table;
width: 100%;
}
.left,
.right,
.center {
box-sizing: border-box;
display: table-cell;
}
.center {
background-color: #3498DB;
}
.left {
width: 200px;
background-color: #1ABC9C;
}
.right {
width: 200px;
background-color: #2ECC71;
}
flex
<div class="container">
<div class="left">left</div>
<div class="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div class="right">right</div>
</div>
.container {
position: relative;
display: flex;
width: 100%;
}
.left,
.right,
.center {
box-sizing: border-box;
display: table-cell;
}
.center {
background-color: #3498DB;
flex:1;
}
.left {
width: 200px;
background-color: #1ABC9C;
}
.right {
width: 200px;
background-color: #2ECC71;
}
Grid
<div class="container">
<div class="left">left</div>
<div class="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div class="right">right</div>
</div>
.container {
position: relative;
display: grid;
width: 100%;
grid-template-columns: 200px auto 200px;
}
.left,
.right,
.center {
box-sizing: border-box;
}
.center {
background-color: #3498DB;
}
.left {
background-color: #1ABC9C;
}
.right {
background-color: #2ECC71;
}
上面就是完成的几种体式格局, 仔细同砚应当能够看到 float、absoulut 这两种体式格局摆布两列并不会跟着中心内容地区高度变化而变化。
假如想要建立三列规划中心自适应,且三列都等高的话挑选 table、flex、Grid;
详细兼容可查阅 兼容性检察
假如有更好的体式格局,人人能够在批评区给出; 一同议论进修