这一次我想讲解一下 html+CSS 的两栏, 三栏布局以及垂直居中的实现方式. 因为个人所学有限所以可能不会罗列出所有的实现方法, 不过我会继续努力查漏补缺.
1. 两栏布局 (左固定, 右适应)
先写出初始样式和结构.
- <div class="container">
- <div class="left">Lorem ipsum dolor sit amet</div>
- <div class="right">Lorem ipsum dolor sit amet</div>
- </div>
- div {
- height: 200px;
- color: #fff;
- }
float+margin 实现方式
- .left {
- float: left;
- width: 300px;
- background-color: #5616;
- }
- .right {
- width: 100%;
- margin-left: 300px;
- background-color: #438;
- }
position 实现方式
- .left {
- position: absolute;
- left: 0;
- width: 300px;
- background-color: #5616;
- }
- .right {
- width: 100%;
- margin-left: 300px;
- background-color: #438;
- }
- flex
- .container {
- display: flex;
- }
- .left {
- flex: 0 0 300px;
- background-color: #5616;
- }
- .right {
- flex: 1 1;
- background-color: #438;
- }
右固定, 左适应同理.
2. 三栏布局
float + margin 方式
- <div class="container">
- <div class="left">Lorem ipsum dolor sit amet</div>
- <div class="right">Lorem ipsum dolor sit amet</div>
- <div class="main">Lorem ipsum dolor sit amet</div>
- </div>
- div {
- height: 200px;
- color: #fff;
- }
- .main {
- width: 100%;
- margin-left: 300px;
- margin-right: 100px;
- background-color: #554;
- }
- .left {
- float: left;
- width: 300px;
- background-color: #5616;
- }
- .right {
- float: right;
- width: 100px;
- background-color: #438;
- }
position 实现方式
- .main {
- width: 100%;
- margin-left: 300px;
- margin-right: 100px;
- background-color: #554;
- }
- .left {
- position: absolute;
- left: 0px;
- width: 300px;
- background-color: #5616;
- }
- .right {
- position: absolute;
- right: 0px;
- width: 100px;
- background-color: #438;
- }
以上这些实现方式, 虽然实现了但还不够好. 因为 main 是主要的显示区域, 所以我们应该先加载它再加载其它的地方.
grid 实现方式
- .container {
- display: grid;
- grid-template-columns: 300px auto 100px; // 列的宽度
- }
- .main {
- grid-row: 1; // 第几行
- background-color: #554;
- }
- .left {
- grid-row: 1; // 第几行
- background-color: #5616;
- }
- .right {
- grid-row: 1; // 第几行
- background-color: #438;
- }
圣杯布局
- .container {
- padding: 0 100px 0 300px;
- overflow: hidden;
- }
- .main {
- float: left;
- width: 100%;
- background-color: #554;
- }
- .left {
- position: relative;
- float: left;
- width: 300px;
- left: -300px;
- margin-left: -100%;
- background-color: #5616;
- }
- .right {
- position: relative;
- float: left;
- right: -100px;
- margin-left: -100px;
- width: 100px;
- background-color: #438;
- }
双飞翼布局
- <div class="container">
- <div class="wrap">
- <div class="main">Lorem ipsum dolor sit amet</div>
- </div>
- <div class="left">Lorem ipsum dolor sit amet</div>
- <div class="right">Lorem ipsum dolor sit amet</div>
- </div>
- div {
- height: 200px;
- color: #fff;
- }
- .wrap {
- float: left;
- width: 100%;
- }
- .main {
- margin: 0 100px 0 300px;
- overflow: hidden;
- background-color: #554;
- }
- .left {
- float: left;
- width: 300px;
- margin-left: -100%;
- background-color: #5616;
- }
- .right {
- float: left;
- width: 100px;
- margin-left: -100px;
- background-color: #438;
- }
两种布局方式的不同之处在于如何处理中间主列的位置:
圣杯布局是利用父容器的左, 右内边距 + 两个从列相对定位;
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左, 右外边距进行布局调整
3. 垂直居中
position + margin 实现 (1)
- <div class="container">
- <div class="content"></div>
- </div>
- .container {
- position: relative;
- width: 500px;
- height: 500px;
- background-color: #5465;
- }
- .content {
- position: absolute;
- left: 50%;
- top: 50%;
- width: 200px;
- height: 200px;
- margin-left: -100px;
- margin-top: -100px;
- background-color: #6465;
- }
position + margin 实现 (2)
- .container {
- position: relative;
- width: 500px;
- height: 500px;
- background-color: #5465;
- }
- .content {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- width: 200px;
- height: 200px;
- margin: auto;
- background-color: #6465;
- }
position + transform 实现
- .container {
- position: relative;
- width: 500px;
- height: 500px;
- background-color: #5465;
- }
- .content {
- position: absolute;
- left: 50%;
- top: 50%;
- width: 200px;
- height: 200px;
- transform: translate(-50%, -50%);
- background-color: #6465;
- }
flex 实现
- .container {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 500px;
- height: 500px;
- background-color: #5465;
- }
- .content {
- width: 200px;
- height: 200px;
- background-color: #6465;
- }
inline-block 实现
- .container {
- display: inline-block;
- width: 500px;
- height: 500px;
- text-align: center;
- background-color: #5465;
- }
- .content {
- display: inline-block;
- width: 200px;
- height: 200px;
- vertical-align: middle;
- background-color: #6465;
- }
- .container::after{
- content: '';
- display: inline-block;
- width: 0;
- height: 100%;
- vertical-align: middle;
- }
效果都如下
来源: https://juejin.im/post/5c15c951f265da6172656109