实现多栏自适应布局
2018-07-05 本文已影响55人
_星野
前言
最近做了一个项目需要自适应布局，在此之前自适应布局并没有去接触过，我就去研究下，总结下自适应布局实现各种方式，有什么不足，希望多提提意见
大概有5种方法，可以实现自适应布局
- 浮动布局
- 定位布局
- flex布局
- table-cell布局
- grid布局
题目要求：左边宽度160px，剩余部分自适应
image.png
先说下，我flex布局
html结构，大盒子设置flex，里面设置左右两个小盒子
<body>
<section class="box">
<article class="box-left">
</article>
<article class="box-right">
<h1>hello</h1>
</article>
</section>
</body>
CSS部分
html * { //去除浏览器默认边距
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 100%;
// height:100vh; //高度无法自适应，遇到内容过多，会溢出盒子，用下面方法替代
min-height: 100vh;
max-height: 100%;
}
.box-left {
width: 160px;
min-height: 100vh;
max-height: 100%;
background: greenyellow;
}
.box-right {
// 方法一：
flex: 1;
// 方法二：
width: calc(100% -160px); // 剩余宽度等于总宽度减去左盒子宽度
min-height: 100vh;
max-height: 100%;
background: darkcyan;
}
float 布局，基本就css有些地方改动而已
CSS
.box {
width: 100%;
min-height: 100vh;
max-height: 100%;
}
.box-left {
float: left; //修改地方
width: 160px;
min-height: 100vh;
max-height: 100%;
background: greenyellow;
}
.box-right {
min-height: 100vh;
max-height: 100%;
background: darkcyan;
}
定位布局
CSS
.box {
width: 100%;
min-height: 100vh;
max-height: 100%;
position: relative; //修改地方
}
.box-left {
position: absolute; //修改地方
left: 0; //修改地方
width: 160px;
min-height: 100vh;
max-height: 100%;
background: greenyellow;
}
.box-right {
position: absolute; //修改地方
left: 160px; //修改地方
right: 0; //修改地方
min-height: 100vh;
max-height: 100%;
background: darkcyan;
}
table-cell 布局
CSS
.box {
width: 100%;
min-height: 100vh;
display: table; //修改地方
}
.box>article {
display: table-cell; //修改地方
}
.box-left {
width: 160px;
min-height: 100vh;
background: greenyellow;
}
.box-right {
min-height: 100vh;
background: darkcyan;
}
grid 布局
CSS
.box {
width: 100%;
min-height: 100vh;
display: grid; //修改地方
grid-template-columns: 160px auto; //修改地方
}
.box-left {
background: greenyellow;
}
.box-right {
background: darkcyan;
}
后续：
跳转项目
如果有兴趣想看下这项目话，账号为12345678911，密码123或者自己注册下账号
