css中常见的两列和三列布局:主要介绍三列

两类布局的直接上代码

float+margin实现两列布局

三列布局的几种方法:

圣杯 双飞翼 flex position+margin float+margin
中间内容优先渲染 中间内容需要加容器包裹 熟悉flex属性含义即可 position he top的配合 使用float,注意他的特性,应该是right的内容在最上面显示

下面直接是上面几种方法的代码:


圣杯布局.jpg

双飞翼布局方法.jpg
flex实现三列布局.jpg
position+margin.jpg
margin+float.jpg

下面附上小弟学习的参考资料,希望对大家有帮助。
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

阮一峰flex最经典的教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 8,338评论 0 59
  • 常见的页面布局 作为一个像我这样的切图仔前端而言,拿到设计图的第一步就是要分析设计图大致地划分区域,然后选择一种最...
    自度君阅读 4,968评论 0 1
  • 亲子共读: 1,《易经》 系辞传10-12 第3遍 2,《孙子兵法》 8 第3遍 3,《笠...
    小灵仙子阅读 4,434评论 0 0
  • 啦啦啦啦啦
    简活阅读 1,228评论 0 1