1、flex布局（强烈推荐）

实现方式：左右两栏设置宽度，中间栏设置 flex:1,占满余下部分

<!DOCTYPE html>
<html lang="en"><head><title>flex布局</title><style>.main{height: 60px;display: flex;}.left,.right{height: 100%;width: 200px;background-color: #ccc;}.content{flex: 1;background-color: #eee;}</style>
</head><body><div class="main"><div class="left"></div><div class="content"></div><div class="right"></div></div>
</body></html>

2、grid布局

实现方式：左右两栏设置宽度，中间栏宽度auto

<!DOCTYPE html>
<html lang="en"><head><title>grid布局</title><style>body {display: grid;grid-template-columns: 200px auto 200px;grid-template-rows: 60px;}.left,.right {background-color: #ccc;}.content {background-color: #eee;}</style>
</head><body><div class="left"></div><div class="content"></div><div class="right"></div>
</body></html>

3、magin负值法

实现方式：左右两栏均左浮动，中间栏外层盒子设置浮动，中间栏设置左右两栏宽度的margin值，左栏设置margin -100%，右栏设置 margin值为负的盒子宽度。

<!DOCTYPE html>
<html lang="en"><head><title>margin负值</title><style>.left,.right {float: left;width: 200px;height: 60px;background-color: #eee;}.left {margin-left: -100%;}.right {margin-left: -200px;}.main {width: 100%;float: left;height: 60px;}.content {height: 60px;margin: 0 200px;background-color: #ccc;}</style>
</head><body><div class="main"><div class="content"></div></div><div class="left"></div><div class="right"></div>
</body></html>

4、自身浮动法

实现方式：左栏左浮动，右栏右浮动，中间栏放最后不浮动，设置左右margin值

<!DOCTYPE html>
<html lang="en"><head><title>自身浮动法</title><style>.left,.right {height: 60px;width: 200px;background-color: #eee;}.left {float: left;}.right {float: right;}.content{height: 60px;background-color: #ccc;margin: 0 200px;}</style>
</head><body><div class="left"></div><div class="right"></div><div class="content"></div>
</body></html>

5、绝对定位法

实现方式：左右两栏绝对定位，分别定位到盒子的两侧，中间栏采用margin值撑开盒子

注意：采用定位时，浏览器默认的padding或margin值会影响布局，需要初始化样式 margin:0;padding：0；

<!DOCTYPE html>
<html lang="en"><head><title>绝对定位法</title><style>* {margin: 0;padding: 0;}.left,.right {position: absolute;height: 60px;width: 200px;background-color: #ccc;top: 0;}.left {left: 0;}.right {right: 0;}.content {height: 60px;margin: 0 200px;background-color: #eee;}</style>
</head><body><div class="left"></div><div class="content"></div><div class="right"></div>
</body></html>

三栏布局：左右固定，中间自适应的几种方式相关推荐

css：两栏三栏布局
两栏布局左边固定右边自适应 1.浮动方式 <!DOCTYPE html> <html lang="en"> <head><style> ...
idiom的学习笔记（一）、三栏布局
三栏布局左右固定,中间自适应是网页中常用到的,实现这种布局的方式有很多种,这里我主要写五种.他们分别是浮动.定位.表格.flexBox.网格. 在这里也感谢一些老师在网上发的免费教程,使我们学习起来更 ...
CSS || 三栏布局，两边固定，中间自适应
1 float实现基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margin ...
[html] 写一个三栏布局，两边固定，中间自适应
[html] 写一个三栏布局,两边固定,中间自适应 position + marginfloat + marginflex 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
[html] 写一个三栏布局，中间固定，两边自适应（平均）
[html] 写一个三栏布局,中间固定,两边自适应(平均) <style>html,body {height: 100%;margin: 0;padding: 0;}.container ...
[css] 使用flex实现三栏布局，两边固定，中间自适应
[css] 使用flex实现三栏布局,两边固定,中间自适应同意里面的一个回答,现在有很多简单的实现方式,传统的这个也是一种hack的方式,真的没必要去追究了,但是核心知识点可以掌握.1.把 cent ...
html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...
假设高度已知,请写出三栏布局,其中左右各位300px,中间自适应 1.左右浮动 .left { float: left; width: 300px; background: red; } .right ...
前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
三栏布局（两边固定，中间自适应）
大家理解起来应该没有什么困难,其实三栏式布局和两栏式是相同的,下面我讲一个最简单的三栏布局制作方法. DivCss布局二--三栏布局来源:黄超 [点击放大] 请看上面的图片,只将上篇文章中的图片变成 ...
css实现三栏布局（两侧宽度固定，中间自适应）
<!DOCTYPE html> <html lang="en" dir="ltr"><head><meta chars ...

三栏布局：左右固定，中间自适应的几种方式