CSS 运用table完成5种常见合理布局的方式示例

日期：2021-03-02 类型：科技新闻我要分享

关键词：在线抠图，稿定抠图，在线抠图透明图片，可以抠图的软件，凡科制图

本文详细介绍了CSS 运用table完成5种常见合理布局的方式示例，共享给大伙儿，实际以下：

合理布局1：

实际效果：

编码：

html：

<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

留意：div中要有內容，要不然显示信息不出来

css：

body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  display:table;
  text-align:center;
}
.header,.main,.footer{
  display:table-row;
}
.header{
  height:50px;
  background:tomato;
}
.main{
  background:skyblue;
}
.footer{
  height:50px;
  background:#9d70ff;
}

合理布局2：

实际效果：

编码：

html：

<div class="header">header</div>
<div class="main">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer">footer</div>

css：

body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  display:table;
  text-align:center;
}
.header,.main,.footer{
  display:table-row;
}
.header{
  height:50px;
  background:tomato;
}
.main{
  width:100%;
  display:table;
  height:calc(100vh - 100px);
}
.main .left{
  width:300px;
  display:table-cell;
  background:#fcea96;
}
.main .right{
  display:table-cell;
  background:skyblue;
}
.footer{
  height:50px;
  background:#9d70ff;
}

留意：.main的height特性中的100px是header和footer的高宽比之和

合理布局3：

实际效果：

编码：

html：

<div class="left">left</div>
<div class="right">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</div>

css：

body{
  margin:0;
  padding:0;
  min-height:100vh;
  display:table;
  text-align:center;
}
.left{
  display:table-cell;
  width:200px;
  background:tomato;
}
.right{
  display:table;
  width:calc(100vw - 200px);
  height:100vh;
}
.header,.main,.footer{
  display:table-row;
}
.header{
  height:50px;
  background:skyblue;
}
.main{
  background:#fcea96;
}
.footer{
  height:50px;
  background:#9d70ff;
}

合理布局4（双栏合理布局，事例为左侧固定不动，右侧自融入）：

实际效果：

编码：

html：

<div class="left">left</div>
<div class="right">right</div>

css：

body{
  margin:0;
  padding:0;
  width:100%;
  height:100vh;
  display:table;
  text-align:center;
}
.left,.right{
  display:table-cell;
}
.left{
  width:300px;
  background:tomato;
}
.right{
  background:skyblue;
}

合理布局5（3栏合理布局，事例为左侧固定不动，右侧固定不动，正中间自融入）：

实际效果：

编码：

html：

<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>

css：

body{
  margin:0;
  padding:0;
  width:100%;
  height:100vh;
  display:table;
  text-align:center;
}
.left,.middle,.right{
  display:table-cell;
}
.left{
  width:300px;
  background:tomato;
}
.middle{
  background:#ffe69e;
}
.right{
  width:200px;
  background:skyblue;
}

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：前端开发css完成最基础的時间轴的示例编码返回下一篇：没有了