等高布局
padding 补值法
- 实现方法:将
margin-bottom
设为负值,同时将padding-bottom
的值设为正的margin值。 - 缺点:等高的div没有底边的边框。
- 解决方式:
- 使用背景图来模仿底部边框或使用div来模仿列的边框。
- 在等高元素中加入一个相对于容器绝对定位的div元素,并设置其高度为边框高度。
- 实现方法:将
flex布局法
- 实现方法:将包含等高布局div的父div设置为
display:flex;
、align-items: stretch;
- 实现方法:将包含等高布局div的父div设置为
display:table-cell;
两栏自适应布局
浮动布局
左边div
float:left;
,右边div设置margin-left
值,实现左边固定,右边自适应的布局效果。绝对定位
左边div
position:absolute;
、margin-right: -100%;
,右边自适应元素设置margin-left
的值来实现左边固定宽度右边自适应宽度的布局效果。
三栏自适应布局
float+负margin
HTML:先写中间元素,在写左元素和右元素。
CSS:容器元素、左元素和右元素都是左浮动,左元素设置负margin为-100%,右元素设置负margin为负右元素的宽度,中间元素在容器元素中,设置margin-left为左元素的宽度+左元素和中间元素的间隔,设置margin-right为右元素的宽度+右元素和中间元素的间隔。
float
HTML中先写左右两个元素,最后写中间元素,左右两个元素分别左浮动和右浮动,中间元素设置margin-left和margin-right