当前位置: 首页 > Web前端 > CSS

三栏式布局(左右固定,中间自适应)

时间:2023-03-30 14:02:33 CSS

*{margin:0;填充:0;}.left,.right{宽度:200px;高度:200px;背景:红色;位置:绝对;顶部:0;}。左{左:0;}.right{右:0;}.middle{高度:200px;背景:#efbdbd;左边距:200px;右边距:200px;}1.定位我在左边,我是固定的

我在中间,我是自适应的,左右位置都固定了,都出了文档流,终于有机会挤到中间了!只要我还有余地,就没有人会拦着我!我真是个聪明的小鬼(同时,我还是个自由人,我可以把我的div写在开头、中间和结尾)
我是在右边,我也固定了
*{margin:0;填充:0;}.left,.right{宽度:200px;高度:200px;背景:红色;位置:绝对;顶部:0;}。左{左:0;}.right{右:0;}.middle{高度:200px;背景:#efbdbd;左边距:200px;右边距:200px;}2、浮动我在左边,我是固定的
我在右边,我也是固定的我在右边,我也是固定的我在中间,我是自适应的,左右飘出文档流,我就挤进去了,边距一下子不会被挡住(这里是我的div一定要在左右后面,因为如果我在前面,他们会浮在我身上哟后面).left,.right{width:200px;高度:200px;背景:红色;}.left{浮动:左;}.right{浮动:对;}.middle{高度:200px;背景:#efbdbd;左边距:200px;右边距:200px;}3、圣杯布局我在中间,我自适应

1.左中右浮动:left;对了,position:relative后面会用到
2.middlewidth:100%;
3.这个时候中间的元素会拉开两侧,所以我们用margin-left把他拉回来;
4.两边的元素都回来了,但是中间被遮住了怎么办?别着急,给整个外层加个padding;
5.解决了之前的问题,左右元素又偏了!还记得一开始的定位吗?正确的!只需定位左右元素!

(我的div必须在第一位)我是左的,我是固定的我是右的,我也是固定的.middle,.left,.right{float:左;高度:200px;位置:相对;}.middle{宽度:100%;背景:#efbdbd;}.content{填充:0200px;:-100%;左:-200px;}.right{背景:红色;宽度:200px;左边距:-200px;右:-200px;}4。双飞翼布局我在中间,我自适应

1.左中右浮动:left;
2.中间宽度:100%;
3.这时候中间的元素会向两侧拉伸,所以我们用margin-left把它拉回来;
4.两边的元素都拉回来了,怎么办如果中间被覆盖?这次我们不在整个外层添加填充;我们在中间添加一个子标签和边距
5.没关系!

(我的div必须在前)我在左,我在固定我在对了,我也是固定的.middle,.left,.right{浮动:左;高度:200px;}.middle{宽度:100%;背景:#efbdbd;}.middle_son{边距:0200px;}。左{宽度:200px;背景:红色;左边距:-100%;}.right{背景:红色;宽度:200px;左边距:-200px;}5、flex我在左边,我是固定的我在中间,我是自适应的,使用css3的新属性fles,elasticlayout,父元素设置为display:flex,中间div设置为flex;1;我在右边,我也是固定的.content{display:flex;}.left,.right{宽度:200px;高度:200px;背景:红色;}.middle{高度:200px;背景:#efbdbd;弹性:1;}如果想做两栏布局(左边固定,右边自适应),可以参考这个。使用BFC的唯一方法也很简单。圣杯布局和双飞翼布局是参考了这位同学的,可以说是抄袭。https://www.cnblogs.com/imwtr...