CSS两列布局如何实现方式总结

互联网
这是一篇很有收藏价值的文章《CSS两列布局如何实现方式总结》，在开发过程对大家很有帮助，小编结合实例代码给大家介绍的非常详细，需要的朋友可以参考下

两列布局大概是最经典的一种网页布局方式了，本博客就是采用的这种布局。两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。
今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。

1. absolute + margin 方式

首先想到的是利用 absolute + margin 的方式实现。先看看代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="container">
  2. <divclass="sidebar">子列</div>
  3. <divclass="main">主列</div>
  4. </div>
CSS Code复制内容到剪贴板
  1. .container{
  2. position:relative;
  3. }
  4. .sidebar{
  5. position:absolute;
  6. top:0;
  7. left:0;
  8. width:200px;
  9. height:300px;
  10. background-color:rgba(255,0,0,.5);
  11. }
  12. .main{
  13. height:300px;
  14. margin-left:210px;
  15. background-color:rgba(0,255,0,.5);
  16. }

该方式利用 position 让 sidebar 列脱离文档流，然后通过 main 列的 margin-left 移除被 sidebar 列覆盖的部分。如此，我们就实现了定宽 + 自适应的两列布局。

（1）列顺序调整

在不修改 HTML 的情况下，只需简单修改 CSS，我们可以让左右两列顺序互换，来看代码：

CSS Code复制内容到剪贴板
  1. .sidebar{
  2. position:absolute;
  3. top:0;
  4. rightright:0;
  5. }
  6. .main{
  7. margin-right:210px;
  8. }

（2）主内容列优先显示

让我们考虑的更完美一点，可不可以把 main 列放 sidebar 列 的前面，使主要内容优先加载渲染？ Let us try！

XML/HTML Code复制内容到剪贴板
  1. <divclass="container">
  2. <divclass="main">主列</div>
  3. <divclass="sidebar">子列</div>
  4. </div>

做上面的简单调整即可，CSS不需要任何修改！

（3）问题所在

虽然这种方式的优点很多，但是却存在一个致命缺点。因为 sidebar 列脱离了文档流，当 sidebar 列比 main 列高时会覆盖后面的布局：问题demo。
如果在 container 容器上 添加 overflow:hidden 就会使 sidebar 溢出部分被裁减。在这种布局方式下，这个问题确实没有有效的解决办法。

2. float + margin 方式

然后想到的就是 float + margin 来实现两列布局，首先实现左栏定宽，主内容自适应的两栏布局。代码如下：

XML/HTML Code复制内容到剪贴板
  1. <divclass="sidebar">子列</div>
  2. <divclass="main">主列</div>
CSS Code复制内容到剪贴板
  1. .sidebar{
  2. float:left;
  3. width:200px;
  4. height:300px;
  5. background-color:rgba(255,0,0,.5);
  6. }
  7. .main{
  8. height:300px;
  9. margin-left:210px;
  10. background-color:rgba(0,255,0,.5);
  11. }

这种实现方式比较简单，首先把子列浮动到左边，然后在主列上设置 margin-left 为子列留出显示空间即可。

那么，这种方式支不支持调换列的位置呢？当然可以。CSS代码如下：

CSS Code复制内容到剪贴板
  1. .sidebar{
  2. float:rightright;
  3. width:200px;
  4. height:300px;
  5. background-color:rgba(255,0,0,.5);
  6. }
  7. .main{
  8. height:300px;
  9. margin-right:210px;
  10. background-color:rgba(0,255,0,.5);
  11. }

问题所在：

看起来 float + margin 方式是个好办法，然而我们前面提到过的主列在前优先显示的优化却不能实现。

3. float + 负margin 方式

废话不多说，直接上代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="main-wrapper">
  2. <divclass="main">主列</div>
  3. </div>
  4. <divclass="sidebar">子列</div>
CSS Code复制内容到剪贴板
  1. .main-wrapper{
  2. float:left;
  3. width:100%;
  4. }
  5. .main{
  6. height:100px;
  7. margin-left:210px;
  8. background-color:rgba(255,0,0,.5);
  9. }
  10. .sidebar{
  11. float:left;
  12. width:200px;
  13. height:100px;
  14. margin-left:-100%;
  15. background-color:rgba(0,255,0,.5);
  16. }

大家应该都看出来了，这就是双飞翼布局，主列优先显示。实现的过程如下：

首先浮动 main 列和 sidebar 列，然后通过 负margin 正确定位 sidebar 列。
把 main 列嵌套在一个 div 里，该 div 的宽度值设为100%。
最后通过设置 main 列的 margin-left 消除被 sidebar 覆盖的部分即可。

以上就是CSS两列布局如何实现方式总结。拼搏中奇迹铸就，汗水中胜利牵手。更多关于CSS两列布局如何实现方式总结请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例