css布局之上下两行布局(上面固定高度,下面自适应)

html-css026

css布局之上下两行布局(上面固定高度,下面自适应),第1张

方法一: 利用position绝对定位+BFC

html:

css:

方法二:flex布局

html:

css:

那就要套2层DIV比较好了把边框也切到背景图里面去注意,要固宽<div class="上半部分背景,顶对齐,水平平铺"> <div class="下半部分背景,底对齐,水平平铺"> <ul class="中间边框两边为浅灰,中间背景可以是透明或者白色,象素高度即可,垂直平铺"> </ul> </div></div>

三栏布局一般指的是页面中一共有三栏, 左右两栏宽度固定,中间自适应的布局 ,三栏布局的具体实现:

利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。