常见pc端三栏布局方案

kally0428
324 阅读3分钟
之前看过的面试题中有关于pc端常见的三栏布局的实现，下面总结一下几种实现方案。作为一名前端小白，以往在学习和工作中遇到问题有时候会通过Evernote的方式记录，有时候直接没有记录，从来没有在公开的博客发表过技术文章，为了督促自己养成良好的工作和学习习惯，决定以后将自己的学习笔记转移到这里，谈不上技术文章，只是对遇到问题的一个总结，也便于以后自己回头查阅。
这个布局的要求是实现pc端常见的左中右三栏布局（高度已知），左右两栏宽度固定（300px），中间自适应

方案一 浮动方式

这里要注意的是html结构中，中间自适应部分的div必须写在最后。

/* html结构 */
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>

/* css部分 */
body {    margin: 0;    padding: 0;}
div {    height: 100px;}.left {    width: 300px;    background: red;    float: left;}.right {    width: 300px;    background: red;    float: right;}.center {    background: yellow;    height: 200px;    overflow: hidden;}

效果如图所示：



方案二 绝对定位方式


/* html结构 */
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>/* css部分 */
body {    position: relative;}.left, .right {
    width: 300px;    height: 100px;    background: red;    position: absolute;    left: 0;    top: 0;
}.left {    left: 0;}.right {    right: 0;}.center {    height: 400px;    background: #0f0;    position: absolute;    top: 0;    left: 300px;    right: 300px;}

这里的最终效果同浮动布局一致，不贴图了。

方案三 table布局方式

/* html结构 */
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>/* css部分 */

body {    margin: 0;    padding: 0;    display: table;    width: 100%;}div {    display: table-cell;}.left, .right {    width: 300px;    background: red;}.center {    height: 200px;    background: yellow;}

效果图如下：


方案四 flex布局方式

/* html结构 */
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>

/* css部分 */

body {    display: flex;    width: 100%;}.left, .right {    flex: 0 0 300px;    background: red;}.center {    height: 200px;    background: yellow;    flex: 1;}

效果同方案三

方案五 grid布局

/* html结构 */
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>

/* css部分 */

body {    display: grid;    grid-template-columns: 300px auto 300px;}.left, .right {    background: red;}.center {    height: 200px;    background: yellow;}

效果同方案三

几种方案的比较

  1. 浮动方案：缺点是需要清除浮动，如果处理不好和周边元素的关系，会带来很多问题，优点是兼容性好；
  2. 绝对定位：优点是快捷，便于配合js使用，缺点是脱离文档流，子元素也脱离文档流，可使用性比较差；
  3. flex布局：解决前面两个布局方案的不足，比较完美的方案，特别适用于移动端（ie8不支持）；
  4. table布局：兼容性很好，但是seo不友好，当其中一个单元格的高度改变，相邻的单元格高度也会跟着变化，有些场景不适用；
  5. grid布局：比较新的一种布局方式，兼容性差，优点是代码简洁，写起来很方便。


avatar
文章
阅读
粉丝