涿州网站制作,江西赣州市,网站源码 下载,wordpress google翻译目标#xff1a;
中间自适应#xff0c;两边定宽#xff0c;并且三栏布局在一行展示。
圣杯布局
实现方法#xff1a;
通过float搭建布局margin使三列布局到一行上relative相对定位调整位置#xff1b;
给外部容器添加padding#xff0c;通过相对定位调整左右两列的…目标
中间自适应两边定宽并且三栏布局在一行展示。
圣杯布局
实现方法
通过float搭建布局margin使三列布局到一行上relative相对定位调整位置
给外部容器添加padding通过相对定位调整左右两列的位置。
div idheader#header/divdiv idcontainerdiv idcenter classcolumn#center/divdiv idleft classcolumn#left/divdiv idright classcolumn#right/div/div
div idfooter#footer/div
#header, #footer {background: rgba(29, 27, 27, 0.726);text-align: center;height: 60px;line-height: 60px;clear: both;
}
#container{padding: 0 200px;overflow: hidden;/*形成BFC撑开文档*/
}
.column{height: 200px;float: left;position: relative;
}
#center{width: 100%;background-color: tomato;
}
#left{width: 200px;margin-left: -100%; /* 把left移动到和center同一行并且左边对齐 */left: -200px; /* 再向左移动到main的padding区域,就不会挡住center了 */background-color: aqua;
}
#right{width: 200px;margin-left: -200px; /* 把right移动到和center同一行并且右边对齐 */right: -200px; /* 向右移动到右边的padding区域*/background-color: wheat;
}圣杯布局效果 双飞翼布局
实现方法
通过floatmargin不使用相对定位
在中间层外面套一层div加上margin将 center内容 挤到中间
div idheader#header/divdiv idcontainerdiv idcenter classcolumndiv idcenter-content#center/div/divdiv idleft classcolumn#left/divdiv idright classcolumn#right/div
/divdiv idfooter#footer/div
#header, #footer {background: rgba(29, 27, 27, 0.726);text-align: center;height: 60px;line-height: 60px;clear: both;
}
.column{height: 200px;float: left;
}
#center{width: 100%;background-color: tomato;
}
#center-content{margin: 0 200px;
}
#left{width: 200px;margin-left: -100%; /* 作用和圣杯一样 */background-color: aqua;}
#right {width: 200px;margin-left: -200px; /* 作用和圣杯一样 */background-color: wheat;
}双飞翼布局
两者本质区别
