多栏布局
秃头的甜甜圈
这个作者很懒,什么都没留下…
展开
-
多栏布局解决方案之伪等高
等高布局之伪等高等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。实现要点:(1)多个列需要单独设置自己的背景色。(2)一列变高,其他列等高变化表格实现 行等高、列等宽伪等高 :内外边距相消法 (父盒子的高度取决于子盒子里最高盒子的高度)步骤:给几列盒子设置很大的 正padding-bottom再给几列盒子设置很大的 负 margin-bottom最外侧的盒子设...原创 2019-08-05 19:46:26 · 161 阅读 · 0 评论 -
多栏布局解决方案之真等高
等高布局之真等高原理:利用内容撑开父元素的特点,即父盒子的高度取决于内容里最高盒子的高度步骤:(假设有三列盒子)1.浮动并排 清除浮动属性,给每个列盒子设置不同的背景色2.给盒子在套几个盒子,其数量等于列的数量,每一列都要分配一个背景盒子,给每个背景盒子设置不同的背景色。3.先移动倒数第二层的盒子(用来放置第三个列盒子),然后依次移动倒数第三层(最里边那个,用来放置第二个列盒子)…设置负...原创 2019-08-05 20:55:35 · 112 阅读 · 0 评论 -
多栏布局解决方案之圣杯布局
圣杯布局 即 三列自适应布局(中间100%,两侧固定宽度)步骤:1.先浮动并排(先写中间盒子,再写两侧 保证左右两侧盒子同时并排到右侧)2.左右两侧盒子用负左外边距放到中心盒子的两侧(左侧盒子 margin-left: -100%(中间盒子宽度); 右侧盒子 margin-left: -300px(自身宽度);)3.设置最外侧盒子的内边距把内容挤到中间4.设置两侧盒子的相对定位移动到...原创 2019-08-05 21:35:47 · 158 阅读 · 0 评论 -
多栏布局解决方案之双飞翼布局
特点:给中心盒子里边再套一个盒子用来放置内容,这个盒子设置左右两侧的外边距,目的是把内容放到中心盒子身上展示步骤:1.先将三个盒子浮动并排(先写中间盒子,再写两侧 保证左右两侧盒子同时并排到右侧)2.左右两侧盒子用负左外边距放到中间盒子的两侧(左侧盒子 margin-left: -100%(中间盒子宽度); 右侧盒子 margin-left: -300px(自身宽度);)3.设置inner...原创 2019-08-05 21:47:46 · 147 阅读 · 0 评论