假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。
初始化页面
*{
padding: 0;
margin: 0;
}
.layout {
margin-top: 20px;
}
.layout article div {
min-height: 100px;
}
下面是五种解决方案
<!-- float浮动的解决方案 -->
<section class="layout float">
<style>
.layout.float .left {
float: left;
width: 300px;
background: #ffa907;
}
.layout.float .right {
float: right;
width: 300px;
background: pink;
}
.layout.float .center {
background: #00d4ae;
}
</style>
<article class="left-center-right">
<div class="left">我是左边</div>
<div class="right">我是右边</div>
<div class="center">
<h1>浮动解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
</article>
</section>
<!-- 绝对定位的解决方案 -->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div {
position: absolute;
}
.layout.absolute .left {
left: 0;
width: 300px;
background: #ffa907;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: #00d4ae;
}
.layout.absolute .right {
right: 0;
width: 300px;
background: pink;
}
</style>
<article class="left-center-right">
<div class="left">我是左边</div>
<div class="right">我是右边</div>
<div class="center">
<h1>绝对定位解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
</article>
</section>
<!-- flexbox的解决方案 -->
<section class="layout flexbox">
<style>
.layout.flexbox {
margin-top: 140px;
}
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: #ffa907;
}
.layout.flexbox .center {
flex: 1;
background: #00d4ae;
}
.layout.flexbox .right {
width: 300px;
background: pink;
}
</style>
<article class="left-center-right">
<div class="left">我是左边</div>
<div class="center">
<h1>flexbox解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
<div class="right">我是右边</div>
</article>
</section>
<!-- 表格布局的解决方案 -->
<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: #ffa907;
}
.layout.table .center {
background: #00d4ae;
}
.layout.table .right {
width: 300px;
background: pink;
}
</style>
<article class="left-center-right">
<div class="left">我是左边</div>
<div class="center">
<h1>flexbox解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
<div class="right">我是右边</div>
</article>
</section>
<!-- 网格布局的解决方案 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left {
width: 300px;
background: #ffa907;
}
.layout.grid .center {
background: #00d4ae;
}
.layout.grid .right {
width: 300px;
background: pink;
}
</style>
<article class="left-center-right">
<div class="left">我是左边</div>
<div class="center">
<h1>flexbox解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
<div class="right">我是右边</div>
</article>
</section>
几种方案的比较
1.浮动布局 缺点：浮动以后脱离文档流 优点：兼容性好
2.绝对定位 缺点：脱离文档流 ，可使用性差 优点：快捷
3.flexbox布局 移动端使用很多
4.表格布局 兼容性好
5.网格布局 代码量少
另补充两种方式
<section class="layout margin">
<style>
.layout.margin .left-center-right .main {
width: 100%;
float: left;
}
.layout.margin .center {
margin: 0 300px;
background: #00d4ae;
}
.layout.margin .left {
float: left;
width: 300px;
margin-left: -100%;
background: #ffa907;
}
.layout.margin .right {
float: right;
width: 300px;
margin-left: -300px;
background: pink;
}
</style>
<article class="left-center-right">
<div class="main">
<div class="center">
<h1>margin解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
</div>
<div class="left">我是左边</div>
<div class="right">我是右边</div>
</article>
</section>
中间的主体使用双层标签，外层div宽度100%显示，并且浮动，内层div为真正的主体内容,含有左右300像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即300像素。
<section class="layout margin">
<style>
.layout.margin .left-center-right .main {
padding: 300px;
}
.layout.margin .center {
width: 100%;
float: left;
background: #00d4ae;
}
.layout.margin .left {
float: left;
margin-left: -100%;
position: relative;
left: -300px;
width: 300px;
background: #ffa907;
}
.layout.margin .right {
float: right;
margin-left: -300px;
position: relative;
right: -300px;
width: 300px;
background: pink;
}
</style>
<article class="left-center-right">
<div class="main">
<div class="center">
<h1>margin解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
<div class="left">我是左边</div>
<div class="right">我是右边</div>
</div>
</article>
</section>
首先用一个外层div包裹主体和左右两栏，外层div设置左右padding:300px,主体和左右两栏左浮动，左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了主题的左侧，再相对定位position:relative;left:-300px;将左栏移动到外层的padding区域，以保证不遮挡主体区域；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即300像素，同时也需要设置相对定位，position:relative;right:-300px;以保证不遮挡主体区域。
网友评论