资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS系列之常用布局

CSS系列之常用布局

qylost / 686人阅读

摘要：流式布局特点等宽不等高参考链接纯实现瀑布流多列及布局原生实现瀑布流效果

参考链接：
干货!各种常见布局实现+知名网站实例分析
前端布局基础概述
https://juejin.im/post/599970...
https://juejin.im/post/5bbcd7...
http://elevenbeans.github.io/...
一些有趣的 CSS 魔法和布局（上）

等高布局 负margin 
</>复制代码 
  2.     
  3.         
  4.             
    left
  5.           
  6.         
  7.             
  8.                 
    center
  9.                 
    center
  10.                      
  11.         
  12.              
  13.         
  14.             
    right
  15.                 
  16.
table 
</>复制代码 
  2.     
  3.         
  4.             
    left
  5.           
  6.         
  7.             
  8.                 
    center
  9.                 
    center
  10.                      
  11.          
  12.         
  13.             
    right
  14.                 
  15.
position 
</>复制代码 
  2.     
  3.         
  4.             
    left
  5.           
  6.         
  7.             
    center
  8.             
    center
  9.                   
  10.         
  11.             
    right
  12.                 
  13.
两端对齐布局 负margin 
</>复制代码 
  2.     
  3.         
  4.             
    头条
      
  5.             
    推荐
     
  6.             
    视频
     
  7.             
    娱乐
      
  8.             
    体育
  9.             
    高考
  10.             
    汽车
  11.             
    科技
  12.             
    图片
  13.         
  14.
text-align: justify

只适用于单列，如果多列，最后一行也可以用加入多个空元素的方法。

</>复制代码 
  2.     
  3.         
    •              
    • 1
    •              
    • 2
    •              
    • 3
    •              
    • 4
    •              
    • 5
    •              
    • 6
    •              
    • 7
    •              
    • 8
    •        
  4.
流式布局

特点：等宽不等高

参考链接：
纯css实现瀑布流（multi-column多列及flex布局）
原生js实现瀑布流效果
https://mfs-mark.github.io/lo...
https://www.w3cplus.com/css/p...

GPU云服务器 云服务器 系列之 系列之二 架构之坑系列 css布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115758.html

相关文章

  • 前端文档收集

    摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    jsbintask 评论0 收藏0

  • 前端文档收集

    摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    muddyway 评论0 收藏0

  • CSS系列之目录

    摘要：图片自适应两列布局一列定宽三列布局各单位距离比较与图形绘制总结兼容性系列之或中系列之关于字体的事系列之伪类与伪元素系列之常用布局系列之布局神器与系列之与系列之水平垂直居中系列之与 word-wrap & word-break & white-space图片自适应两列布局(一列定宽）三列布局css 各单位距离比较BFC与IFCCSS图形绘制总结pointer-eventsCSS兼容性cs...

    cncoder 评论0 收藏0

  • 【前端Talkking】CSS系列——CSS深入理解之float浮动

    摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...

    yankeys 评论0 收藏0

发表评论

登陆后可评论

0条评论

qylost

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<