海口建设网站的公司怎么注册集团公司
2.2 三列布局
三列布局有三种情况,普通三列布局、圣杯布局、双飞翼布局(后两者都是实现两侧宽度固定,中间宽度自适应的三列布局,区别在于双飞翼布局比圣杯布局,中间元素会多个子元素,而左右元素需要定位relative)。
2.2.1 普通三列布局
左中两列定宽,右边自适应。
方案1:定宽+overflow:hidden
分析:原理类似于两列布局方案2
代码:
方案2:flex布局
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
,这样布局就是按照表格行为布局,表格单元格默认等高