微信图片_20190429104217.png
微信图片_20190429104225.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html *{
margin:0;
padding:0;
}
.layout{
margin-top: 20px;
}
.layout div{
min-height: 100px;
}
.layout-flex{
margin-top: 200px;
}
</style>
</head>
<body>
<h1>左右栏固定，中间自适应的三栏布局方法</h1>
<section class="layout ">
<style>
.float .left{
float: left;
width: 300px;
background-color: blue;
}
.float .center{
/* 创建bfc */
overflow: hidden;
background-color: red;
}
.float .right{
float: right;
width: 300px;
background-color: yellow;
}
</style>
<h1>浮动三栏布局，浮动的必须放在前面， 高度不能自适应</h1>
<article class="float">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮动解决方案</h2>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
</div>
</article>
</section>
<section class="layout ">
<style>
.float2 .left{
float: left;
width: 300px;
margin-left: -100%;
background-color: blue;
}
.float2 .center{
float: left;
width:100%;
padding-left: 300px;
padding-right: 300px;
background-color: red;
box-sizing: border-box;
}
.float2 .right{
float: right;
width: 300px;
margin-left: -300px;
background-color: yellow;
}
.float2::after{
content: "";
display: block;
clear: both;
}
</style>
<h1>浮动三栏布局，浮动的放在后面， 高度不能自适应</h1>
<article class="float2">
<div class="center">
<h2>浮动解决方案</h2>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
<p>这是三栏布局的浮动解决方案；</p>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</section>
<section class="layout">
<style>
.relative{
position: relative;
width: 100%;
}
.relative .left{
position: absolute;
left:0;
width: 300px;
background-color: blue;
}
.relative .center{
position: absolute;
left: 300px;
right: 300px;
background-color: red;
}
.relative .right{
position: absolute;
right:0;
width: 300px;
background-color: yellow;
}
</style>
<h1>绝对定位， 高度不能自适应</h1>
<article class="relative">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
<p>这是三栏布局的绝对定位解决方案；</p>
<p>这是三栏布局的绝对定位解决方案；</p>
<p>这是三栏布局的绝对定位解决方案；</p>
<p>这是三栏布局的绝对定位解决方案；</p>
<p>这是三栏布局的绝对定位解决方案；</p>
<p>这是三栏布局的绝对定位解决方案；</p>
<p>这是三栏布局的绝对定位解决方案；</p>
</div>
</article>
</section>
<section class="layout layout-flex">
<style>
.flex-box{
display: flex;
width: 100%;
}
.flex-box .left{
width: 300px;
flex-shrink: 0;
background-color: blue;
}
.flex-box .center{
flex: 1;
background-color: red;
}
.flex-box .right{
width: 300px;
flex-shrink: 0;
background-color: yellow;
}
</style>
<h1>flex-box 两边高度也可以自适应</h1>
<article class="flex-box">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
<p>这是三栏布局的flex-box解决方案；</p>
<p>这是三栏布局的flex-box解决方案；</p>
<p>这是三栏布局的flex-box解决方案；</p>
<p>这是三栏布局的flex-box解决方案；</p>
<p>这是三栏布局的flex-box解决方案；</p>
<p>这是三栏布局的flex-box解决方案；</p>
<p>这是三栏布局的flex-box解决方案；</p>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout ">
<style>
.table{
display: table;
width: 100%;
}
.table .left{
display: table-cell;
width: 300px;
background-color: blue;
}
.table .center{
display: table-cell;
background-color: red;
}
.table .right{
display: table-cell;
width: 300px;
background-color: yellow;
}
</style>
<h1>table布局 两边高度也可以自适应</h1>
<article class="table">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
<p>这是三栏布局的table解决方案；</p>
<p>这是三栏布局的table解决方案；</p>
<p>这是三栏布局的table解决方案；</p>
<p>这是三栏布局的table解决方案；</p>
<p>这是三栏布局的table解决方案；</p>
<p>这是三栏布局的table解决方案；</p>
<p>这是三栏布局的table解决方案；</p>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout ">
<style>
.grid{
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: auto;
width: 100%;
}
.grid .left{
background-color: blue;
}
.grid .center{
background-color: red;
}
.grid .right{
background-color: yellow;
}
</style>
<h1>grid布局 </h1>
<article class="grid">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
<p>这是三栏布局的grid布局解决方案；</p>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
网友评论