苏州网站制作开发公司,百度西安研发中心,线上宣传推广方案,做网站项目体会定宽 自适应 2.2 三列布局 三列布局有三种情况#xff0c;普通三列布局、圣杯布局、双飞翼布局#xff08;后两者都是实现两侧宽度固定#xff0c;中间宽度自适应的三列布局#xff0c;区别在于双飞翼布局比圣杯布局#xff0c;中间元素会多个子元素#xff0c;而左右元素… 定宽 自适应 2.2 三列布局 三列布局有三种情况普通三列布局、圣杯布局、双飞翼布局后两者都是实现两侧宽度固定中间宽度自适应的三列布局区别在于双飞翼布局比圣杯布局中间元素会多个子元素而左右元素需要定位relative。
2.2.1 普通三列布局
左中两列定宽右边自适应。 方案1定宽overflowhidden
分析原理类似于两列布局方案2
代码
定宽 定宽 自适应 方案2flex布局 定宽 定宽 自适应 2.2.2 圣杯布局
两侧宽度固定中间宽度自适应的三列布局中间元素不需要嵌套子元素 方案1左右两侧浮动中间元素使用margin
分析这种方法就是左右两边浮动给定宽度中间元素使用margin空出左右两边元素的位置实现比较简单。
注意这种方式需要在书写html结构时将右侧元素写在中间元素的前面因为如果右侧元素在中间元素后面由于浮动元素位置上不能高于或平级前面的非浮动元素导致右侧元素会下沉。但是中间元素一般都是页面的核心部分放在比较后面的位置不利于SEO。
定宽 定宽 自适应 方案二. 父容器使用margin左中右元素均浮动利用定位和margin移动到正确位置
分析这种方法将中间元素c放置在最前面有利于SEO。
注意实现细节在参考下面代码中的注释。 自适应 定宽 定宽 2.2.3. 双飞翼布局
两侧宽度固定中间宽度自适应的三列布局中间元素内部增加子元素用于放置内容
方案一. 中间元素子元素设置margin左中右元素均设置浮动左右元素通过margin移动到正确位置
分析这种方法为中间元素增加子元素作为内容区域通过子元素设置margin完成。
注意和圣杯布局对照有相似处也有不同实现的结果是一样的。 自适应 定宽 定宽 2.2.4. flex布局实现中间自适应左右等宽
分析flex实现就很简单了可以参照普通三列布局flex实现。
注意还是要注意浏览器兼容性问题。 定宽 自适应 定宽 2.3 多列等分布局 所谓多列等分布局就是若干列在容器中自适应等分宽度我们以五列等分布局为例。
方案一. 浮动 百分数平分
分析这种方案就是每一列浮动之后按照百分比平分宽度实现简单。 方案二. 使用**display: table布局**
分析父容器指定display: table设置布局行为table-layout: fixed指定每个表格等宽。
注意table-layout: fixed是需要设置的默认情况下列宽度由单元格内容设定设置之后列宽由表格宽度和列宽度设定 方案三. 使用column布局
分析使用column布局指定内容区域需要分为5列即可。
注意浏览器兼容性问题。 方案四. 使用flex布局
分析使用flex布局十分简单指定每一列所占空间相同即可 2.4 多列等高布局 所谓多列等高布局就是多类内容可能不一样但是保证每一列的高度是相同的这个高度应该由内容最多的那一列决定
方案一. 使用display: table布局
分析父元素设置display: table子元素设置display: table-cell这样布局就是按照表格行为布局表格单元格默认等高
