<!-- 三栏布局 -->
<!-- float布局 脱离文档流,兼容性好 position布局 脱离文档流,使用性差 flex布局 解决前两者缺点,移动使用居多 tabel布局 兼容性好,不存在脱离文档流(内容多时,两边会自动撑高) grid布局 代码简化 -->
<section class="layout float">
<style type="text/css">
.layout.float .left{
width: 100px;
float: left;
background: #ccc;
}
.layout.float .right{
width: 100px;
float: right;
background: #333;
}
.layout.float .center{
background: red;
}
</style>
<h1>三栏布局--左右宽度固定,中间自适应</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">这是float布局
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
</div>
</article>
</section>
<section class="layout position">
<style type="text/css">
.layout.position .left-center-right{
position: relative;
margin-top: 10px;
}
.layout.position .left{
width: 100px;
position: absolute;
top:0;
left: 0;
background: #ccc;
}
.layout.position .right{
width: 100px;
position: absolute;
top:0;
right: 0;
background: #333;
}
.layout.position .center{
background: red;
position: absolute;
left: 100px;
right: 100px;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">这是absolute布局
<!-- <p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p> -->
</div>
</article>
</section>
<section class="layout tabel">
<style type="text/css">
.layout.tabel .left-center-right{
display: table;
width:100%;
height: 100px;
margin-top: 120px;
}
.layout.tabel .left-center-right div{
display: table-cell;
}
.layout.tabel .left{
width: 100px;
background: #ccc;
}
.layout.tabel .right{
width: 100px;
background: #333;
}
.layout.tabel .center{
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">这是tabel布局
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout flex">
<style type="text/css">
.layout.flex .left-center-right{
margin-top: 10px;
display: flex;
}
.layout.flex .left{
width: 100px;
background: #ccc;
}
.layout.flex .right{
width: 100px;
background: #333;
}
.layout.flex .center{
background: red;
flex: 1;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">这是flex布局
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout grid">
<style type="text/css">
.layout.grid .left-center-right{
margin-top: 10px;
display: grid;
grid-template-rows:100px;
grid-template-columns:100px auto 100px;
}
.layout.grid .left{
background: #ccc;
}
.layout.grid .right{
background: #333;
}
.layout.grid .center{
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">这是grid布局
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
<!-- 两栏布局 上下高度固定,中间自适应-->
<section class="layout vertical">
<style type="text/css">
.layout.vertical{
margin-top: 70px;
}
.layout.vertical .left{
width: 100px;
height: 100px;
background: #ccc;
}
.layout.vertical .right{
width: 100px;
height: 100px;
background: #333;
}
.layout.vertical .center{
width: 100px;
background: red;
}
</style>
<h1>两栏布局--上下高度固定,中间自适应</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
<p>这是三栏布局的浮动解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout absolute">
<style>
.layout.absolute .con>div{position: absolute;}
.layout.absolute .top{background: red;top: 0;height:100px;}
.layout.absolute .center{background: yellow;top:100px;bottom:100px;overflow:auto;}
.layout.absolute .bottom{background: blue;bottom:0;height:100px;}
</style>
<article class="con">
<div class="top"></div>
<div class="center">
<h1>absolute定位</h1>
</div>
<div class="bottom"></div>
</article>
</section>
css三栏布局--左右宽度固定,中间自适应
最新推荐文章于 2023-06-27 10:45:57 发布