如何用CSS实现中间自适应,两边定宽三栏布局

1.前言

用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法。

2.实现原理

要想实现这种“两边定宽,中间自适应的三栏布局”其实也不难,无外乎把握住以下几点:

  • 要想中间自适应,那么中间的div不能设置宽度width,这样宽度就会随着浏览器窗口自适应。
  • 由于div是块级元素,要想三个div处于同一行,那么两边的div就要脱离文档流。
  • CSS3的flex伸缩布局。
  • 表格table布局。
  • 网格布局。

3.具体实现

下面就按照上面所说的实现原理,列举以下几种实现方式:

3.1 浮动解决方案

<style>
.layout-float .right{
float: right;
width: 300px;
height: 100px;
background-color: red;
}
.layout-float .left{
float: left;
width: 300px;
height: 100px;
background-color: blue;
}
.layout-float .center{
height: 100px;
background-color: yellow;
}
</style>
<div class="right"></div>
<div class="left"></div>
<div class="center"><h1>浮动解决方案</h1></div>

3.2 绝对定位解决方案

<style>
.layout-absolute .right{
width: 300px;
height: 100px;
right: 0px;
position: absolute;
background-color: red;
}
.layout-absolute .left{
width: 300px;
height: 100px;
left: 0px;
position: absolute;
background-color: blue;
}
.layout-absolute .center{
left: 300px;
right: 300px;
height: 100px;
position: absolute;
background-color: yellow;
}
</style>
<div class="left"></div>
<div class="center"><h1>绝对定位解决方案</h1></div>
<div class="right"></div>

3.3 Flex伸缩布局解决方案

<style>
.layout-flex .left-center-right{
display: flex;
}
.layout-flex .left-center-right .left{
width: 300px;
height: 100px;
background-color: blue;
}
.layout-flex .left-center-right .center{
flex:;
background-color: yellow;
}
.layout-flex .left-center-right .right{
width: 300px;
height: 100px;
background-color: red;
}
</style>
<div class="left-center-right">
<div class="left"></div>
<div class="center"><h1>Flex伸缩布局解决方案</h1></div>
<div class="right"></div>
</div>

3.4 表格布局解决方案

<style>
.layout-table .left-center-right{
width: 100%;
display: table;
height: 100px;
}
.layout-table .left-center-right>div{
display: table-cell;
}
.layout-table .right{
width: 300px;
height: 100px;
background-color: red;
}
.layout-table .left{
width: 300px;
height: 100px;
background-color: blue;
}
.layout-table .center{
height: 100px;
background-color: yellow;
}
</style>
<div class="left-center-right">
<div class="left"></div>
<div class="center"><h1>表格布局解决方案</h1></div>
<div class="right"></div>
</div>

3.5 网格布局解决方案

<style>
.layout-grid .left-center-right{
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout-grid .right{
background-color: red;
}
.layout-grid .left{
background-color: blue;
}
.layout-grid .center{
background-color: yellow;
}
</style>
<div class="left-center-right">
<div class="left"></div>
<div class="center"><h1>网格布局解决方案</h1></div>
<div class="right"></div>
</div>

4. 效果图

如何用CSS实现中间自适应,两边定宽三栏布局

(完)

上一篇:UISearchBar和UISearchDisplayController


下一篇:redis入门笔记(2)