介绍
这篇文章主要介绍CSS怎么实现三栏布的局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>
其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景。
所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式。
<强>
HTML代码如下:
& lt; div 类=發eft"祝辞Left
& lt; div 类=癿ain"祝辞Main
& lt; div 类=皉ight"祝辞Right CSS代码如下:
//简单的进行CSS 重置
身体,html {
,,,身高:100%;
,,,填充:,0 px;
,,,保证金:0 px;
}//左右绝对定位
.left铃声{
,,,位置:,绝对;
,,,:0 px;
,,,背景:,红色;
,,,身高:100%;
}
.left {
,,,左:0;
,,,宽度:100 px;
}
铃声{
,,,右:0 px;
,,,宽度:200 px;
}//中间使用保证金空出左右元素所占据的空间
.main {
,,,保证金:0 px 200 px 0 px 100 px;
,,,身高:100%;
,,,背景:,蓝色;
} 该方法有个明显的缺点,就是如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。
<强>
HTML代码如下:
//注意元素次序
& lt; div 类=癿ain"祝辞Main 
