CSS三栏布局方案

时间 2019-12-07

标签 css 布局方案栏目 CSS 繁體版

原文原文链接

平时开发或者面试的时候，常常会遇到这样的场景，实现一个三栏布局，具体要求以下：css

高度为100px，左右栏宽度固定为300px，中间栏宽度自适应。html

有多种布局方案能够实现，这里一一探索。android

浮动布局方案

实现思路：git

经过让左右两栏固定宽度和浮动，并设置中间栏的左右外边距实现三栏自适应github

这里还有一种实现思路，中间栏建立一个BFC一样能够实现自适应，原理是浮动不会影响BFC内的内容web

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-浮动布局方案</title>
  <style> .left, .right, .main { height: 100px; } .left { width: 300px; float: left; background: red; } .right { width: 300px; float: right; background: blue; } .main { margin-left: 300px; margin-right: 300px; background: yellow; } </style>
</head>
<body>
  <article>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
    <main class="main">main</main>
  </article>
</body>
</html>
复制代码

缺点：面试

内容展示顺序与DOM结构不一致，主体内容后加载，必定程度影响用户体验
当宽度缩小到不足以显示三栏时，右侧栏会被挤到下方

兼容性：chrome

PC端支持IE6+, Firefox 2+, Chrome 1+
移动端支持iOS Safari 1.0，Android browser 1.0

绝对定位布局方案

实现思路:segmentfault

容器设置为相对定位，左右两栏分别用绝对定位，中间栏增长左右外边距实现自适应浏览器

还有一种思路，左右两栏分别绝对定位在两侧，中间栏一样使用绝对定位，并设置左右的距离为300px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-绝对定位方案</title>
  <style> .container { position: relative; } .main, .left, .right { height: 100px; } .main { margin-left: 300px; margin-right: 300px; background: yellow; } .left { position: absolute; top: 0; left: 0; width: 300px; background: red; } .right { position: absolute; top: 0; right: 0; width: 300px; background: blue; } </style>
</head>
<body>
  <article class="container">
    <main class="main">main</main>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
  </article>
</body>
</html>
复制代码

缺点：

父元素必需要定位（使用非static的定位方式）
宽度缩小到没法显示主体内容时，主体内容会被覆盖没法显示

优势：

内容能够优先加载

兼容性：

PC端支持IE6+, Firefox 2+, Chrome 1+
移动端未知

Flex布局方案

实现思路：

设置容器为flex，而后左右栏设置固定宽度不可伸缩，中间栏设置为自动伸缩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-弹性盒布局方案</title>
  <style> .container { display: flex; } .left, .main, .right { height: 100px; } .left { flex: 0 0 300px; background: red; } .main { flex: 1 1 auto; background: yellow; } .right { flex: 0 0 300px; background: blue; } </style>
</head>
<body>
  <article class="container">
    <aside class="left">left</aside>
    <main class="main">main</main>
    <aside class="right">right</aside>
  </article>
</body>
</html>
复制代码

缺点：

没法兼容低版本的浏览器

优势：

代码简洁，DOM结构清晰
主流的实现方式

兼容性：

PC端支持IE10及以上、Edge 12,chrome 21,firefox 28,safari 6.1（IE10为部分支持，其余浏览器版本为彻底支持）
移动端支持iOS Safari 7, android browser 4.4
兼容性详情

网格布局方案

实现思路：

设置容器为grid，而后设置行高度为100px，设置三栏的宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-网格布局方案</title>
  <style> .container { display: grid; grid-template-rows: 100px; grid-template-columns: 300px 1fr 300px; } .left { background: red; } .main { background: yellow; } .right { background: blue; } </style>
</head>
<body>
  <article class="container">
    <aside class="left">left</aside>
    <main class="main">main</main>
    <aside class="right">right</aside>
  </article>
</body>
</html>
复制代码

缺点：

兼容性相对弹性盒要差，不过目前绝大部分浏览器较新的版本已经支持

优势:

代码简洁，DOM结构清晰

兼容性:

PC端支持IE10及以上、Edge 16,chrome 57,firefox 52,safari 10.1（IE10为部分支持，其余浏览器为彻底支持的起始版本）
移动端支持iOS Safari 10.3, android browser 67
兼容性详情

表格布局方案

实现思路:

设置容器为table且宽度为100%，并设置子元素为table-cell

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-表格布局方案</title>
  <style> .container { display: table; width: 100%; } .left, .main, .right { display: table-cell; height: 100px; } .left { width: 300px; background: red; } .main { background: yellow; } .right { width: 300px; background: blue; } </style>
</head>
<body>
  <article class="container">
    <aside class="left">left</aside>
    <main class="main">main</main>
    <aside class="right">right</aside>
  </article>
</body>
</html>
复制代码

缺点:

非语义化

优势:

兼容浏览器版低

兼容性:

PC支持IE8+, Firefox 3+, Chrome 4+, Safari 3.1+
移动端支持 iOS Safari 3.2, android browser 2.1
兼容性详情

圣杯布局

实现思路:

经过将左右两栏挂在容器的两侧，从而实现三栏布局，形状相似圣杯

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-圣杯布局方案</title>
  <style> .container { margin-left: 300px; margin-right: 300px; overflow: hidden; } .main, .left, .right { height: 100px; } .main { float: left; width: 100%; background: yellow; } .left { float: left; margin-left: -100%; width: 300px; position: relative; left: -300px; background: red; } .right { float: left; margin-left: -300px; width: 300px; position: relative; left: 300px; background: blue; } </style>
</head>
<body>
  <article class="container">
    <main class="main">main</main>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
  </article>
</body>
</html>
复制代码

缺点:

当中间栏宽度比左栏宽度小时，布局会发生混乱

优势:

支持内容优先加载

兼容性:

参考浮动布局方案

双飞翼布局方案

实现思路:

基于圣杯布局，引入一个容器来放置中间栏，而且设置中间栏的外边距，不须要使用相对定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-双飞翼布局方案</title>
  <style> .main .in, .left, .right { height: 100px; } .main { float: left; width: 100%; } .main .in { margin-left: 300px; margin-right: 300px; background: yellow; } .left { float: left; width: 300px; margin-left: -100%; background: red; } .right { float: right; width: 300px; margin-left: -300px; background: blue; } </style>
</head>
<body>
  <article class="container">
    <main class="main">
      <div class="in">main</div>
    </main>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
  </article>
</body>
</html>
复制代码

缺点:

DOM结构较复杂

优势:

支持内容优先加载
相对圣杯布局，宽度缩小，布局不会发生混乱

兼容性:

参考浮动布局方案

欢迎访问我的博客 blog.bookcell.org/

CSS三栏布局方案

浮动布局方案

绝对定位布局方案

Flex布局方案

网格布局方案

表格布局方案

圣杯布局

双飞翼布局方案

参考