介绍 & lt; style>
* {
保证金:0;
填充:0;
box-sizing: border-box;
}
.clearfix:之前,
.clearfix:{后
显示:表;
内容:““;
明确:;
}
.container {
填充:0 200 px;
}
.header,
.footer {
身高:200 px;
字体大小:28 px;
background - color: # f3f3f3;
}
.left {
位置:相对;/* 2,将.left再次拉到最左边,否则。主要的左侧会有200 px的空白*/左:-200 px;
浮:左;
宽度:200 px;
最小高度:300 px;/* 1,将.left拉到最左边,原来。左边是掉下去的*/margin-left: -100%;
background - color: # f00;
}
.main {
浮:左;
宽度:100%;
最小高度:300 px;
background - color: # c32228;
}
铃声{
位置:相对;/* 2,将铃声再次拉到最右边,否则。主要的右侧会有200 px的空白*/右:-200 px;
浮:左;
宽度:200 px;/* 1,将铃声拉到最右边,原来。正确的是掉下去的*/margin-left: -200 px;
最小高度:300 px;
background - color: #法郎;
}
& lt;/style> & lt; div类=癶eader"祝辞header
& lt; div类=叭萜鱟learfix"祝辞
& lt; div类=癿ain"祝辞main这篇文章主要介绍了css实现双飞翼布局的方法有哪些,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
圣杯布的局,双飞翼布局效果图
从效果图来看圣杯布的局,双飞翼布局效果是一样一样的。
<强>圣杯布的局,双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100%
