所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。

1. 基于传统的position和margin等属性进行布局

这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。

1).绝对定位法

绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}#left {width: 100px;height: 200px;background-color: red;position: absolute;top:120px;left: 0;}#right {width: 100px;height: 200px;background-color: green;position: absolute;top:120px;right: 0;}#middle {height: 200px;margin: 2px 200px;background-color: saddlebrown;}</style>
</head>
<body><div id="content"><div id="left">左侧</div><div id="middle">中间</div><div id="right">右侧</div></div>
</body>
</html>

2).使用自身浮动法

自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}#left {width: 100px;height: 200px;background-color: red;float: left;}#right {width: 100px;height: 200px;background-color: green;float: right;}#middle {height: 200px;margin: 2px 200px;background-color: saddlebrown;}</style>
</head>
<body><div id="content"><div id="left">左侧</div><div id="right">右侧</div><div id="middle">中间</div></div>
</body>
</html>

该布局法的好处是受外界影响小，但是不足是三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。

2 ， css3新特性

在外围包裹一层div，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}#wrap {width: 100%;height: 100%;display: flex;margin: 10px;}#left {width: 100px;height: 200px;background-color: red;margin: 10px;}#right {width: 100px;height: 200px;background-color: green;  margin: 10px;           }#middle {flex: 1;height: 200px;margin: 10px;background-color: saddlebrown;}</style>
</head>
<body><div id="wrap">    <div id="left"></div><div id="middle"></div><div id="right"></div></div>
</body>
</html>

注意： center一定要放到中间。

转载于:https://www.cnblogs.com/zhaosijia----1234/p/8778711.html

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）相关推荐

css 两边宽度固定中间自适应宽度
#content_left{ //左 width:73px; height:100px; vertical-align:middle; margin-right:-100px; float:lef ...
css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位左边中间右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
用CSS的float和clear创建三栏液态布局的方法(转载）
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. ...
左中右三栏式布局
一.中间自适应,左右两边宽度固定方法1:box容器 Flex布局,center设置为 flex:1 <!DOCTYPE html> <html lang="en&qu ...
【三栏式布局、双飞翼布局、圣杯布局】09
三栏式布局文章目录三栏式布局 1. 用calc函数实现三栏式布局 2. 双飞翼布局 3. 圣杯布局两边盒子固定宽度,中间盒子自适应的布局. 1. 用calc函数实现三栏式布局 <div c ...
HCJ2：页面两栏式或三栏式布局
2.1 简介大家在进行页面布局的时候,可能会遇见两栏式布局与三栏式布局,如下图所示: 两栏式例子: 三栏式 2.2 方法 2.2.1 两栏式 .left-pane{width: 14%;heigh ...
三个经典布局：三栏式布局、双飞翼布局、圣杯布局
1.三栏式布局三栏式布局就是左栏定宽左浮动,右栏定宽右浮动. <div class="wrap"><div class="left"> ...
HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局
一.三栏式布局顾名思义,即是将主页分成三部分(左,中,右),给左边和右边的块定宽,中间的块占据余下部分.以下是几种常用的实现方法 1.巧用浮动优点:兼容性好,实现简单缺点:必须先写浮动元素,再写 ...
html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案
原标题:详解左右宽度固定中间自适应html布局解决方案本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下 left right ce ...

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

1. 基于传统的position和margin等属性进行布局

1).绝对定位法

2).使用自身浮动法

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）相关推荐

最新文章

热门文章