流量网站怎么做的,济南优化排名公司,长沙网站seo报价,iview可以做门户网站吗三栏布局一般指的是页面中一共有三栏#xff0c;左右两栏宽度固定#xff0c;中间自适应的布局#xff0c;三栏布局的具体实现#xff1a;
利用绝对定位#xff0c;左右两栏设置为绝对定位#xff0c;中间设置对应方向大小的margin的值。
.outer {position: relative;h…三栏布局一般指的是页面中一共有三栏左右两栏宽度固定中间自适应的布局三栏布局的具体实现
利用绝对定位左右两栏设置为绝对定位中间设置对应方向大小的margin的值。
.outer {position: relative;height: 100px;
}.left {position: absolute;width: 100px;height: 100px;background: tomato;
}.right {position: absolute;top: 0;right: 0;width: 200px;height: 100px;background: gold;
}.center {margin-left: 100px;margin-right: 200px;height: 100px;background: lightgreen;
}
利用flex布局左右两栏设置固定大小中间一栏设置为flex:1。
.outer {display: flex;height: 100px;
}.left {width: 100px;background: tomato;
}.right {width: 100px;background: gold;
}.center {flex: 1;background: lightgreen;
}
利用浮动左右两栏设置固定大小并设置对应方向的浮动。中间一栏设置左右两个方向的margin值注意这种方式**中间一栏必须放到最后**
.outer {height: 100px;
}.left {float: left;width: 100px;height: 100px;background: tomato;
}.right {float: right;width: 200px;height: 100px;background: gold;
}.center {height: 100px;margin-left: 100px;margin-right: 200px;background: lightgreen;
}
圣杯布局利用浮动和负边距来实现。父级元素设置左右的 padding三列均设置向左浮动中间一列放在最前面宽度设置为父级元素的宽度因此后面两列都被挤到了下一行通过设置 margin 负值将其移动到上一行再利用相对定位定位到两边。
.outer {height: 100px;padding-left: 100px;padding-right: 200px;
}.left {position: relative;left: -100px;float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;
}.right {position: relative;left: 200px;float: right;margin-left: -200px;width: 200px;height: 100px;background: gold;
}.center {float: left;width: 100%;height: 100px;background: lightgreen;
}
双飞翼布局双飞翼布局相对于圣杯布局来说左右位置的保留是通过中间列的 margin 值来实现的而不是通过父元素的 padding 来实现的。本质上来说也是通过浮动和外边距负值来实现的。
.outer {height: 100px;
}.left {float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;
}.right {float: left;margin-left: -200px;width: 200px;height: 100px;background: gold;
}.wrapper {float: left;width: 100%;height: 100px;background: lightgreen;
}.center {margin-left: 100px;margin-right: 200px;height: 100px;
}
