CSS二栏布局的实现小结
两列布局可能是最典型的网页布局形式，而这个博客是使用的布局。在两列布局中，最常见的情况是主要是自适应宽度，侧边栏是固定宽度。今天，好好看看如何使用自适应宽度+自适应实现这两列布局。
1。绝对+边界模式
首先要考虑的是绝对+边距的使用：
xml代码将内容复制到剪贴板。
子列
主要栏目
CSS代码将内容复制到剪贴板。
{容器。
职位：相对；
}
{。侧边栏
位置：绝对；
顶部：0；
左：0；
宽度：200px；
身高：300px；
背景颜色：RGBA（255, 0, 0。5）；
}
{为主。
身高：300px；
左：210px保证金；
背景颜色：RGBA（0, 255, 0。5）；
}
此方法使用位置将边栏列从文档流中去掉，然后通过主列的左边部分删除边栏列所覆盖的部分，从而实现了固定宽度+自适应的两列布局。
（1）序列调整
没有修改HTML，CSS只简单修改，我们可以让左、右两列互换为了看代码：
CSS代码将内容复制到剪贴板。
{。侧边栏
位置：绝对；
顶部：0；
错误：0；
}
{为主。
右边距：210px；
}
（2）主内容列的优先显示
让我们更完美地考虑它。你能把主体放在边栏栏前面，让主内容优先加载渲染吗让我们试试看！
xml代码将内容复制到剪贴板。
主要栏目
子列
做上述简单的调整，CSS不需要任何修改！
（3）问题是
尽管这种方式有很多优点，但存在一个致命的缺陷：因为从文档流中的边栏列，当侧边栏的主栏将覆盖在布局后面的高线公园时：演示。
如果添加溢出：隐藏在容器容器上，则会减少侧边栏溢出部分。在这个布局中，没有有效的解决方案。
2。浮动+余量模式
然后我想到了浮动+余量来实现两列布局，首先实现了左栏宽度，主要内容是自适应的两栏布局：
xml代码将内容复制到剪贴板。
子列
主要栏目
CSS代码将内容复制到剪贴板。
{。侧边栏
浮点数：左；
宽度：200px；
身高：300px；
背景颜色：RGBA（255, 0, 0。5）；
}
{为主。
身高：300px；
左：210px保证金；
背景颜色：RGBA（0, 255, 0。5）；
}
这个实现相对简单，第一个列句柄向左浮动，然后在主列中设置空白，以显示空间到子列。
那么，这种方式不支持交换列的位置吗当然。CSS代码如下所示：
CSS代码将内容复制到剪贴板。
{。侧边栏
浮：错误；
宽度：200px；
身高：300px；
背景颜色：RGBA（255, 0, 0。5）；
}
{为主。
身高：300px；
右边距：210px；
背景颜色：RGBA（0, 255, 0。5）；
}
问题是：
看来浮动+余量方法是一个很好的方法，但是我们在前面的第一个显示中提到的优化是不能实现的。
三.浮动+负边距模式
不多说，直接在代码上：
xml代码将内容复制到剪贴板。
主要栏目
子列
CSS代码将内容复制到剪贴板。
{主包装器
浮点数：左；
宽度：100%；
}
{为主。
身高：100px；
左：210px保证金；
背景颜色：RGBA（255, 0, 0。5）；
}
{。侧边栏
浮点数：左；
宽度：200px；
身高：100px；
左缘：- 100%；
背景颜色：RGBA（0, 255, 0。5）；
}
每个人都应该看到它，这是双翼布局，主栏首先显示出来：
首先，浮动主栏和边栏列，然后以负边距正确地定位边栏列。
主列嵌套在div中，div的宽度值设置为100%。
最后，我们可以通过设置主列的边距来消除侧栏所覆盖的部分。