美文网首页
两栏布局,三栏布局(圣杯布局、双飞翼布局)

两栏布局,三栏布局(圣杯布局、双飞翼布局)

作者: yuanjiex | 来源:发表于2018-08-04 11:04 被阅读0次

一. 两栏布局总结(左边固定,右侧自适应)

第一种: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布局

相关文章

  • CSS布局分类

    两栏布局 三栏布局 双飞翼布局 圣杯布局

  • CSS Flex实现各种布局

    实现两栏布局 实现栅格布局 实现三栏布局 附录 双飞翼布局 圣杯布局

  • 特殊布局方法

    关于圣杯布局和双飞翼布局:CSS布局之--淘宝双飞翼布局双飞翼布局介绍CSS控制自适应宽度两三栏布局圣杯布局的实现...

  • CSS布局知识点

    双飞翼布局 (淘宝UED对圣杯布局的升级优化) 圣杯布局和双飞翼布局的实现(三栏布局),都是左右两栏固定宽度,中间...

  • 入门任务11

    单栏布局三栏布局圣杯布局双飞翼布局页面范例

  • CSS布局

    单栏布局三栏布局圣杯布局双飞翼布局代码五

  • css入门11

    单栏布局三栏布局圣杯布局双飞翼布局实现如下页面

  • CSS布局

    单列布局(通栏)三栏布局圣杯布局双飞翼布局代码--->参考

  • CSS布局

    单栏布局双列布局三列布局圣杯布局双飞翼布局效果范例

  • vip10-1211作业

    单栏布局 三栏布局三栏布局自己又简化写了一遍 圣杯布局 双飞翼布局

网友评论

      本文标题:两栏布局,三栏布局(圣杯布局、双飞翼布局)

      本文链接:https://www.haomeiwen.com/subject/zhgpvftx.html