假设高度已知，请写出三栏布局，其中左栏右栏宽度各为300px，中间自适应
dongyang0 2019-11-03
1、浮动布局
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}2、绝对布局
.layout.absolute .left-right-center>div {
position: absolute;
}
.layout.absolute .left{
left : 0;
width : 300px;
background : red;
}
.layout.absolute .center{
left : 300px;
right : 300px;
background : yellow;
}
.layout.absolute .right{
right:0;
width:300px;
background:blue;
}3、弹性布局
.layout.flexbox{
margin-top : 140px;
}
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left{
width : 300px;
background : red;
}
.layout.flexbox .center{
flex : 1;
background : yellow;
}
.layout.flexbox .right{
width : 300px;
background : blue;
}4、表格布局
.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;
}5、网格布局
.layout.grid .left-center-right {
display : grid;
width : 100%;
grid-template-rows: 100px;
grid-template-columns : 300px auto 300px;
}
.layout.grid .left{
background : red;
}
.layout.grid .center{
background : yellow;
}
.layout.grid .right{
background : blue;
}6、全部代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layout</title>
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout {
margin-top : 20px;
}
.layout article div{
min-height : 100px;
}
</style>
</head>
<body>
<!-- 1 浮动布局 -->
<section class ="layout float">
<style media = "screen">
/* 通过把多个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）
.layout.float (两者之间无空格)
例如： .layout.float { color: red; }
<div class="layout float">被选择的元素</div> */
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
</style>
<article class = "left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
<p>1、这是三栏布局中间部分</p>
<p>2、这是三栏布局中间部分</p>
</div>
</article>
</section>
<!-- 2 绝对布局 -->
<section class = "layout absolute">
<style>
.layout.absolute .left-right-center>div {
position: absolute;
}
.layout.absolute .left{
left : 0;
width : 300px;
background : red;
}
.layout.absolute .center{
left : 300px;
right : 300px;
background : yellow;
}
.layout.absolute .right{
right:0;
width:300px;
background:blue;
}
</style>
<article class = "left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
<p>1、这是三栏布局绝对定位中间部分</p>
<p>2、这是三栏布局绝对定位中间部分</p>
</div>
</article>
</section>
<!-- 3 弹性布局 -->
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top : 140px;
}
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left{
width : 300px;
background : red;
}
.layout.flexbox .center{
flex : 1;
background : yellow;
}
.layout.flexbox .right{
width : 300px;
background : blue;
}
</style>
<article class = "left-center-right">
<div class = "left"></div>
<div class = "center">
<h2>flexbox解决方案</h2>
<p>1、这是三栏布局flexbox中间部分</p>
<p>2、这是三栏布局flexbox中间部分</p>
</div>
<div class = "right"></div>
</article>
</section>
<!-- 4 表格布局 -->
<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>
<p>1、这是三栏布局表格布局中间部分</p>
<p>2、这是三栏布局表格布局中间部分</p>
</div>
<div class = "right"></div>
</article>
</section>
<!-- 5 网格布局 -->
<section class = "layout grid">
<style media="screen">
.layout.grid .left-center-right {
display : grid;
width : 100%;
grid-template-rows: 100px;
grid-template-columns : 300px auto 300px;
}
.layout.grid .left{
background : red;
}
.layout.grid .center{
background : yellow;
}
.layout.grid .right{
background : blue;
}
</style>
<article class = "left-center-right">
<div class = "left"></div>
<div class = "center">
<h2>网格布局</h2>
<p>1、这是三栏布局网格布局中间部分</p>
<p>2、这是三栏布局网格布局中间部分</p>
</div>
<div class = "right"></div>
</article>
</section>
</body>
</html>7、效果图
相关推荐
Ladyseven 0喜欢 / 0评论 2020-10-22
luofuIT成长记录 0喜欢 / 0评论 2020-09-22
Mynamezhuang 0喜欢 / 0评论 2020-09-18
李鴻耀 0喜欢 / 0评论 2020-08-17
yaodilu 0喜欢 / 0评论 2020-08-03
zhoujiyu 0喜欢 / 0评论 2020-06-28
89510194 0喜欢 / 0评论 2020-06-27
CaiKanXP 0喜欢 / 0评论 2020-06-13
MaureenChen 0喜欢 / 0评论 2020-06-12
Phoebe的学习天地 0喜欢 / 0评论 2020-06-07
淡风wisdon大大 0喜欢 / 0评论 2020-06-06
buttonChan 0喜欢 / 0评论 2020-06-06
xtuhcy 0喜欢 / 0评论 2020-05-20
AlisaClass 0喜欢 / 0评论 2020-05-18
赵家小少爷 0喜欢 / 0评论 2020-05-16
nicepainkiller 0喜欢 / 0评论 2020-05-05
yaodilu 0喜欢 / 0评论 2020-04-30
前端工程师喻文强 0喜欢 / 0评论 2020-04-27
只有代码的世界 0喜欢 / 0评论 2020-04-27
冰蝶 0喜欢 / 0评论 2020-04-26
vavid 0喜欢 / 0评论 2020-04-21
nicepainkiller 0喜欢 / 0评论 2020-04-17
AlisaClass 0喜欢 / 0评论 2020-04-14
zengni 0喜欢 / 0评论 2020-04-07
沈宫新 0喜欢 / 0评论 2020-03-04
lanzhusiyu 0喜欢 / 0评论 2020-03-01
wangjie 0喜欢 / 0评论 2020-02-26
wangjie 0喜欢 / 0评论 2020-02-26
tianzyc 0喜欢 / 0评论 2020-02-19
sdbxpjzq 0喜欢 / 0评论 2020-02-17
NARUTOLUOLUO 0喜欢 / 0评论 2011-06-24
wangjie 0喜欢 / 0评论 2020-02-02
bertzhang 0喜欢 / 0评论 2020-01-31
83206837 0喜欢 / 0评论 2020-01-23
ebuild 0喜欢 / 0评论 2013-05-14
81751330 0喜欢 / 0评论 2013-05-31
dazhifu 0喜欢 / 0评论 2020-01-17
85206633 0喜欢 / 0评论 2020-01-12
冰蝶 0喜欢 / 0评论 2020-01-10
wyqwilliam 0喜欢 / 0评论 2020-01-09
Sabrina 0喜欢 / 0评论 2020-01-09
RexLeee 0喜欢 / 0评论 2020-01-07
CaiKanXP 0喜欢 / 0评论 2020-01-04
waterv 0喜欢 / 0评论 2020-01-02
加菲猫园 0喜欢 / 0评论 2013-06-16