资讯专栏INFORMATION COLUMN

三栏布局-左右宽固定,中间自适应

abson / 2889人阅读

摘要:优化方式二圣杯布局优化方式三双飞翼布局给元素包裹一个容器处理方式二和三解决方式非常类似只是处理的细节不一样具体用那个都可以一般推荐用前者上面就是实现的几种方式细心同学应该可以看到这两种方式左右两列并不会随着中间内容区域高度变化而变化。

常用方式罗列

float

absolute

table

flex

grid

float

</>复制代码

  1. left
  2. right
  3. center

</>复制代码

  1. .container {
  2. overflow: auto;
  3. }
  4. .left {
  5. width: 200px;
  6. float: left;
  7. background-color: #1ABC9C;
  8. }
  9. .right {
  10. width: 200px;
  11. float: right;
  12. background-color: #2ECC71;
  13. }
  14. .center {
  15. margin-left: 200px;
  16. margin-right: 200px;
  17. background-color: #3498DB;
  18. }

上面实现方式优点,实现简单兼容性好

</>复制代码

  1. 缺点:根据渲染的规则,从上到下,也就是说left和right会优先渲染, center部分会最后渲染.
优化方式-1

利用负margin来完成

</>复制代码

  1. center

  2. center

  3. center

  4. center

  5. center

  6. center

  7. center

  8. left
  9. right

</>复制代码

  1. .container {
  2. overflow: auto;
  3. }
  4. .left,
  5. .right,
  6. .center {
  7. box-sizing: border-box;
  8. }
  9. .left {
  10. width: 200px;
  11. float: left;
  12. background-color: #1ABC9C;
  13. margin-left: -100%;
  14. }
  15. .right {
  16. width: 200px;
  17. float: right; // float:left;
  18. background-color: #2ECC71;
  19. margin-left: -200px;
  20. }
  21. .center {
  22. float: left;
  23. width: 100%;
  24. padding-left: 200px;
  25. padding-right: 200px;
  26. background-color: #3498DB;
  27. }

完成前面主要内容优先加载问题,但是又有新问题,当主体内容过长的时,发现背景(边框、背景图等等)影响到了两侧

如果只处理背景问题可以使用下面方式

</>复制代码

  1. .center {
  2. background-clip: content-box
  3. }

如果有边框、背景图片等显然上面不能满足。

优化方式二 (圣杯布局)

</>复制代码

  1. center

  2. center

  3. center

  4. center

  5. center

  6. center

  7. center

  8. left
  9. right

</>复制代码

  1. .container {
  2. margin:0 200px;
  3. position: relative;
  4. }
  5. .left,
  6. .right,
  7. .center {
  8. box-sizing: border-box;
  9. }
  10. .center {
  11. float: left;
  12. width: 100%;
  13. background-color: #3498DB;
  14. }
  15. .left {
  16. position: relative;
  17. left:-200px;
  18. float: left;
  19. width: 200px;
  20. margin-left: -100%;
  21. background-color: #1ABC9C;
  22. }
  23. .right {
  24. position: relative;
  25. right:-200px;
  26. float: right;
  27. width: 200px;
  28. margin-left: -200px;
  29. background-color: #2ECC71;
  30. }
优化方式三: (双飞翼布局) 给 center 元素包裹一个容器

</>复制代码

  1. center

  2. center

  3. center

  4. center

  5. center

  6. center

  7. center

  8. left
  9. right

</>复制代码

  1. .container {
  2. overflow: auto;
  3. }
  4. .left,
  5. .right,
  6. .center,
  7. .center-warpper {
  8. box-sizing: border-box;
  9. }
  10. .center-warpper {
  11. float:left;
  12. width: 100%;
  13. padding-left: 200px;
  14. padding-right: 200px;
  15. }
  16. .center {
  17. width: 100%;
  18. overflow: auto;
  19. background-color: #3498DB;
  20. }
  21. .left {
  22. width: 200px;
  23. float: left;
  24. background-color: #1ABC9C;
  25. margin-left: -100%;
  26. }
  27. .right {
  28. width: 200px;
  29. float: right;
  30. background-color: #2ECC71;
  31. margin-left: -200px;
  32. }

</>复制代码

  1. 处理方式二和三解决方式非常类似,只是处理的细节不一样. 具体用那个都可以一般推荐用前者

absolute

</>复制代码

  1. center

  2. center

  3. center

  4. center

  5. center

  6. center

  7. center

  8. left
  9. right

</>复制代码

  1. .container {
  2. position: relative;
  3. }
  4. .left,
  5. .right,
  6. .center {
  7. box-sizing: border-box;
  8. }
  9. .center {
  10. position: absolute;
  11. left: 200px;
  12. right: 200px;
  13. background-color: #3498DB;
  14. }
  15. .left {
  16. position: absolute;
  17. left: 0;
  18. width: 200px;
  19. background-color: #1ABC9C;
  20. }
  21. .right {
  22. position: absolute;
  23. right: 0;
  24. float: right;
  25. width: 200px;
  26. background-color: #2ECC71;
  27. }

table

</>复制代码

  1. left
  2. center

  3. center

  4. center

  5. center

  6. center

  7. center

  8. center

  9. right

</>复制代码

  1. .container {
  2. position: relative;
  3. display: table;
  4. width: 100%;
  5. }
  6. .left,
  7. .right,
  8. .center {
  9. box-sizing: border-box;
  10. display: table-cell;
  11. }
  12. .center {
  13. background-color: #3498DB;
  14. }
  15. .left {
  16. width: 200px;
  17. background-color: #1ABC9C;
  18. }
  19. .right {
  20. width: 200px;
  21. background-color: #2ECC71;
  22. }

flex

</>复制代码

  1. left
  2. center

  3. center

  4. center

  5. center

  6. center

  7. center

  8. center

  9. right

</>复制代码

  1. .container {
  2. position: relative;
  3. display: flex;
  4. width: 100%;
  5. }
  6. .left,
  7. .right,
  8. .center {
  9. box-sizing: border-box;
  10. display: table-cell;
  11. }
  12. .center {
  13. background-color: #3498DB;
  14. flex:1;
  15. }
  16. .left {
  17. width: 200px;
  18. background-color: #1ABC9C;
  19. }
  20. .right {
  21. width: 200px;
  22. background-color: #2ECC71;
  23. }

Grid

</>复制代码

  1. left
  2. center

  3. center

  4. center

  5. center

  6. center

  7. center

  8. center

  9. right

</>复制代码

  1. .container {
  2. position: relative;
  3. display: grid;
  4. width: 100%;
  5. grid-template-columns: 200px auto 200px;
  6. }
  7. .left,
  8. .right,
  9. .center {
  10. box-sizing: border-box;
  11. }
  12. .center {
  13. background-color: #3498DB;
  14. }
  15. .left {
  16. background-color: #1ABC9C;
  17. }
  18. .right {
  19. background-color: #2ECC71;
  20. }

上面就是实现的几种方式, 细心同学应该可以看到 float、absoulut 这两种方式左右两列并不会随着中间内容区域高度变化而变化。

如果想要创建三列布局中间自适应,且三列都等高的话选择 table、flex、Grid;

具体兼容可查阅 兼容性查看

如果有更好的方式,大家可以在评论区给出; 一起讨论学习

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53962.html

相关文章

  • 三栏布局(一)-------左右固定中间适应

    摘要:幼圆常见的页面布局有幼圆左右宽度固定,中间自适应幼圆上下高度固定,中间自适应幼圆左宽度固定,右自适应幼圆上高度固定,下自适应,幼圆下边是我看过网上的视频后写出来的三栏布局左右宽高固定,中间自适应幼圆有种布局方常见的页面布局有 1、左右宽度固定,中间自适应; 2、上下高度固定,中间自适应; 3、左宽度固定,右自适应; 4、上高度固定,下自适应, 下边是我看过网上的视频后写出来的三栏布局-左右宽...

    Aldous 评论0 收藏0
  • css三栏布局左右固定中间适应

    摘要:圣杯布局直接上代码双飞翼布局自身浮动法绝对定位法 圣杯布局 直接上代码:html: css: .middle,.left,.right {float: left;} .middle {width: 100%;} .left {margin-left: -100%; width: 220px; } .right {margin-left: -220px; wi...

    CoorChice 评论0 收藏0
  • css三栏布局左右固定中间适应

    摘要:圣杯布局直接上代码双飞翼布局自身浮动法绝对定位法 圣杯布局 直接上代码:html: css: .middle,.left,.right {float: left;} .middle {width: 100%;} .left {margin-left: -100%; width: 220px; } .right {margin-left: -220px; wi...

    Vicky 评论0 收藏0
  • 三栏布局(二)-------上下固定中间适应

    摘要:上一篇写的是左右宽高固定,中间自适应,根据上一篇的内容,总结了下上下宽高固定,中间自适应的几种布局方式,有种布局方式话不多说,直接上代码。上一篇写的是左右宽高固定,中间自适应,根据上一篇的内容,总结了下上下宽高固定,中间自适应的几种布局方式, 有4种布局方式:   position;   flex;    table;   grid; 话不多说,直接上代码。 DOCTYPE html> ...

    Render 评论0 收藏0
  • 三栏布局-左右固定,中间适应

    摘要:优化方式二圣杯布局优化方式三双飞翼布局给元素包裹一个容器处理方式二和三解决方式非常类似只是处理的细节不一样具体用那个都可以一般推荐用前者上面就是实现的几种方式细心同学应该可以看到这两种方式左右两列并不会随着中间内容区域高度变化而变化。 常用方式罗列 float absolute table flex grid float left righ...

    hiYoHoo 评论0 收藏0

发表评论

0条评论

abson

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<