RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
怎么在CSS中利用table布局示例-创新互联

怎么在CSS中利用table布局示例？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

浦东ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

布局一：


效果：

怎么在CSS中利用table布局示例

代码：

html：

header
main
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{
  background:skyblue;
}
.footer{
  height:50px;
  background:#9d70ff;
}

布局二：

效果：

怎么在CSS中利用table布局示例

代码：

html：

header
  left
  right
footer

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的高度之和

布局三：

效果：

怎么在CSS中利用table布局示例

代码：

html：

left
  header
  main
  footer

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;
}

布局四（双栏布局，例子为左边固定，右边自适应）：

效果：

怎么在CSS中利用table布局示例

代码：

html：

left
right

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;
}

布局五（三栏布局，例子为左边固定，右边固定，中间自适应）：

效果：

怎么在CSS中利用table布局示例

代码：

html：

left
middle
right

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中利用table布局示例-创新互联
当前URL：http://www.jxjierui.cn/article/csoscg.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区浩晨众云设计工作室（个体工商户）
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.jxjierui.cn

公司名称：青羊区浩晨众云设计工作室（个体工商户） 联系电话：18980820575

网站备案号：蜀ICP备2025119795号-2

内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 成都做网站