一. 两栏布局总结(左边固定,右侧自适应)
第一种:float+BFC
注意:设置左盒子margin-right直接设置
原理:左侧元素浮动,右侧元素设为BFC,有间距设置浮动元素外边距即可
Document .wrapper { padding: 15px 20px; border: 1px dashed #ff6c60; overflow: auto; } .left { width: 120px; float:left; margin-right:20px; border: 5px solid #ddd; } .right { border: 5px solid #ddd; overflo
css样式设置:

布局:

第二种:单纯float
左侧元素float,右侧元素用margin-left>=左侧元素宽度,对浮动元素设置margin-left是不起作用的,只会把右侧的字挤走

第三种:absolute+margin-left (不好用)
左侧绝对定位,右侧设置外边距,左盒子比右盒子高时,要用min-height属性

第四种:flex布局

Titl二. 三栏布局(圣杯布局、双飞翼布局)
第一种:左右定宽

第二种:浮动确定

第三种:圣杯布局
两边定宽,中间自适应的三栏布局
实现过程:
第一步:将左中右三部分设为左浮动,保证可以在一行显示,中间宽度设为100%,保证自适应
第二步:用负margin将左和右移到和中间同一行
第三步:中间内容用padding,避免中间内容被左右挡住,同时为左右部分挪出空位
第四步:运用相对定位把左右部分挪回原位

第四种:双飞翼布局(先渲染main)
为了避免左右两部分使用relative,以后无法修改定位,双飞翼为中间内容单独加了一个容器以便margin 来为左右留出空白;
float+margin
实现过程:
第一步:将左中右三部分设为左浮动,保证可以在一行显示,中间宽度设为100%,保证自适应
第二步:用负margin将左和右移到和中间同一行
第三步:将内部盒子用margin,把主要内容挤出来

第五种:flex布局

网友评论