<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<style type="text/css">
html,*{
margin:0;
padding: 0;
}
section{
margin-top: 20px;
}
/*浮动定位*/
.layout-float div{
min-height: 100px;
}
.layout-float .left{
width: 300px;
float: left;
background-color: red;
}
.layout-float .right{
width: 300px;
float:right;
background-color: green;
}
.layout-float .center{
background-color: yellow;
}
/*绝对定位*/
.layout-absolute{
position: relative;
}
.layout-absolute div{
min-height: 100px;
position: absolute;
}
.layout-absolute .left{
width: 300px;
left: 0;
background-color: red;
}
.layout-absolute .right{
width: 300px;
right: 0;
background-color: green;
}
.layout-absolute .center{
/*通过左右定位 自适应宽度*/
left: 300px;
right: 300px;
background-color: yellow;
}
/*flex*/
.layout-flex{
display: flex;
margin-top: 140px;
}
.layout-flex div{
min-height: 100px;
}
.layout-flex .left{
width: 300px;
background-color: red;
}
.layout-flex .right{
width: 300px;
background-color: green;
}
.layout-flex .center{
flex:1;
background-color: yellow;
}
/*table*/
.layout-table{
width: 100%;
display: table;
}
.layout-table div{
display: table-cell;
height: 100px;
}
.layout-table .left{
width: 300px;
background-color: red;
}
.layout-table .right{
width: 300px;
background-color: green;
}
.layout-table .center{
background-color: yellow;
}
/*grid*/
.layout-grid{
display: grid;
grid-template-rows: 100px; /*行高*/
grid-template-columns: 300px auto 300px;/*三栏 宽度*/
}
.layout-grid .left{
background-color: red;
}
.layout-grid .right{
background-color: green;
}
.layout-grid .center{
background-color: yellow;
}
</style>
</head>
<body>
<section>
<article class="layout-float">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
三栏布局
1、左边左浮动
2、右边由浮动
3、中间自适应
</div>
</article>
</section>
<section>
<article class="layout-absolute">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
1、左边left为0
2、右边right为0
3、中间left为300px
</div>
<div class="right"></div>
</article>
</section>
<section>
<article class="layout-flex">
<div class="left"></div>
<div class="center">
<h1>flex解决方案</h1>
flex实现三栏布局
</div>
<div class="right"></div>
</article>
</section>
<section>
<article class="layout-table">
<div class="left"></div>
<div class="center">
<h1>table解决方案</h1>
table实现三栏布局
</div>
<div class="right"></div>
</article>
</section>
<section>
<article class="layout-grid">
<div class="left"></div>
<div class="center">
<h1>网格解决方案</h1>
网格实现三栏布局
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
五种实现三栏布局的方式,左右宽度固定中间自适应(一)——面试常考点
最新推荐文章于 2020-08-19 17:24:03 发布