介绍
这篇文章给大家分享的是有关CSS三栏布局怎么弄的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
对于前端来说,布局也是必须掌握的,一个好的布局可以让页面看起来更美观。提到布的局,那就不得不说CSS三栏布局。这是前端面试经常会问到的一个问题,算是基础题。所谓的三栏布的局,一般是指左右两边固定中间自适应,或者是中间固定左右两边自适应。
<强>左右两边固定中间自适应
圣杯布局
HTML结构设置
新建一个父元素,包含三个子元素:左,主要,对(注意,主要在写在前面,这样在页面渲染时会先加载中间,针对面试题优先加载中间部分)
风格样式设置
1,父元素设置高度
, 2,三个元素均设置浮动
, 3,中间主要部分定宽100%:宽度:100%左右两边按产品需求设置宽高
, 4,左边设置margin-left: -100%;右边设置margin-right:——右盒子宽
, 5,父元素设置padding-left:左盒子宽;padding-right:右盒子宽
, 6日左右盒子相对定位
& lt; div类=癱ontainer"比;
& lt; div类=爸饕猣"在去aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead
& lt; div类=白骹"祝辞& lt;/div>
& lt; div类=坝襢"祝辞& lt;/div>
& lt;/div>
& lt; style>
身体{
min-width: 700 px;
｝
.container {
身高:300 px;
填充:0 200 px 0 200 px;
｝
.f {
浮:左;
｝
.main {
宽度:100%;
身高:300 px;
background - color: cornflowerblue;
｝
.left {
宽度:200 px;
身高:300 px;
background - color: indianred;
margin-left: -100%;
位置:相对;
左:-200 px;
｝
铃声{
宽度:200 px;
身高:300 px;
background - color: lightgreen;
margin-left: -200 px;
位置:相对;
右:-200 px;
｝
& lt;/style>
该布局受内部元素影响而破坏布局的概率低,但是当浏览器屏幕缩小的一定程度时,左右两侧的内容会掉下来,或发生重叠现象。解决方案,给身体加一个最小宽度(起码大于左右两侧宽度之和)
双飞翼布局
与圣杯布局的思路是一致的,只是有一些细微的差别。
HTML结构设置
新建一个父元素,包含三个子元素:左,主要,对(注意,主要在写在前面,这样在页面渲染时会先加载中间,针对面试题优先加载中间部分)
风格样式设置
1,父元素设置高度
, 2,三个元素均设置浮动
, 3,中间主要部分定宽100%:宽度:100%左右两边按产品需求设置宽高
, 4,中间主要部分再加一个盒子内,放置内容(与圣杯布局的不同点)
, 5,左边设置margin-left: -100%;右边设置margin-right:——右盒子宽
, 6日,新添加盒子,内心,设置左右填充或保证金
& lt; div类=癱ontainer"比;
& lt; div类=爸饕猣"比;
& lt; div类=inner>去aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead
& lt;/div>
& lt; div类=白骹"祝辞& lt;/div>
& lt; div类=坝襢"祝辞& lt;/div>
& lt;/div>
& lt; style>
.container {
身高:300 px;
｝
.f {
浮:左;
｝
.main {
宽度:100%;
身高:300 px;
background - color: cornflowerblue;
｝
.left {
宽度:200 px;
身高:300 px;
background - color: indianred;
margin-left: -100%;
｝
铃声{
宽度:200 px;
身高:300 px;
background - color: lightgreen;
margin-left: -200 px;
｝
在{
填充:0 200 px 0 200 px;
｝
& lt;/style> 
