布局方式－表格布局

Posted 2021-02-07 wzndkj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了布局方式－表格布局相关的知识，希望对你有一定的参考价值。

普通的表格布局

<style>
　　.table {
　　　　display: table;
　　　　width: 800px;
　　　　height: 200px;
　　}
　　.table-row {
　　　　display: table-row;
　　}
　　.table-cell {
　　　　vertical-align: middle;
　　　　display: table-cell;
　　}
　　.left {
　　　　background: red;
　　}
　　.right {
　　　　background: blue;
　　}
</style>
<body>
　　<div class="table">
　　　　<div class="table-row">
　　　　　　<div class="left table-cell">左</div>
　　　　　　<div class="right table-cell">右</div>
　　　　</div>
　　</div>
</body>

三栏布局－表格布局

<style media="screen">
　　html *{
　　　　padding: 0;
　　　　margin: 0;
　　}
　　.layout article div{
　　　　min-height: 100px;
　　}
</style>
<body>
　　<section class="layout table">
　　　　<style>
　　　　　　.layout.table .left-center-right {
　　　　　　　　width: 100%;
　　　　　　　　display: table;
　　　　　　　　height: 100px;
　　　　　　}
　　　　　　.layout.table .left-center-right>div {
　　　　　　　　display: table-cell;
　　　　　　}
　　　　　　.layout.table .left {
　　　　　　　　width: 300px;
　　　　　　　　background: red;
　　　　　　}
　　　　　　.layout.table .center {
　　　　　　　　background: yellow;
　　　　　　}
　　　　　　.layout.table .right {
　　　　　　　　width: 300px;
　　　　　　　　background: blue;
　　　　　　}
　　　　</style>
　　　　<article class="left-center-right">
　　　　　　<div class="left"></div>
　　　　　　<div class="center">
　　　　　　　　<h2>表格布局</h2>
　　　　　　</div>
　　　　　　<div class="right"></div>
　　　　</article>
　　</section>
</body>

以上是关于布局方式－表格布局的主要内容，如果未能解决你的问题，请参考以下文章

Android片段布局完成膨胀

在 Android 中使用具有多个布局的单个片段

在片段中以编程方式在视图中包含布局

以编程方式将片段添加到android中的框架布局

为片段设置新布局

BootStrap有用代码片段（持续总结）