抱歉,你查看的文章已删除

css中的那些布局

因为最近心血来潮,就总结了一下css中的几种常见的多列布局。

两列自适应布局

两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用。 这种布局通常是左侧固定,右边自适应,当然也有反过来的,道理一样,这里有好几种方法。

(张鑫旭老师的博客是左边流式布局,右边固定宽度)
  • 左浮动+margin

 因为浮动会导致元素脱离文档流,所以下面的元素会占据浮动元素原来的位置。
 这个时候只要对右边元素设置margin-left:左边div宽度 就可以实现自适应布局。

代码:左浮动实现两列布局

  • 绝对定位实现两列布局

这个原理类似浮动,因为绝对定位会脱离文档流,只需要设置右div的margin-left就能实现布局。

代码:绝对定位实现两列布局

  • flex实现两列布局

 flex布局一直挺好用,无奈兼容性捉急,ie10+才支持。  
 
 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。  
 
 flex布局默认项目是主轴为水平方向,最主要的是flex属性。flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。  
 
 
 大概就是给左边的div一个固定值,然后给右边设置flex:auto;来实现两列布局。  
 
 
 这里不多对flex布局介绍,有兴趣的可以看一下

阮一峰老师的这篇博客:flex布局

这里是代码链接:flex布局实现两列布局

  • calc实现两列布局

  这是css3里面的新属性,兼容性还可以,在ie9+、FF4.0+、Chrome19+、Safari6+都得到了支持。  
 
 通过calc可以使用百分比、em、px和rem单位值计算出其宽度或者高度,这样就不用考虑div值到底是多少。所以可以对右边div设置width:calc(100%-100px);来实现自适应布局。  
 

代码链接:calc实现两列布局

  • 浮动+margin负值来实现

 这是之前写ife任务的时候在一篇博客上看到的。
 
 实现方法是给右边的div外面再套上一个父div,然后让父div的宽度设为100%。
 对父div和左边的div都设置左浮动,再让左div的margin-left:-100%,右div设置margin-left:左div的宽度。
 这样就实现了自适应布局,当然左右div的前后顺序要反过来。
 

具体看代码:margin负值实现自适应

三列自适应布局

除了常见的两列布局,我们也经常能够见到三列布局,左右固定,中间自适应。

 (这里只是拿这张图举个例子,w3school官网是三列固定布局)
  • 浮动实现三列布局

  这个类似两列布局的浮动,对左右div分别设置左右浮动,中间div设置margin-left和margin-right来实现,当然在html中的顺序应该是左右中。  
  
  

代码链接:浮动实现三列布局

  • margin负值实现三列布局

原理同margin负值实现两列布局,不多说了。

直接上代码:margin负值实现三列布局

  • flex实现三列布局

和flex两列布局一个原理,对两边设置flex:0 0 100px,中间设置flex:auto。

代码代码:flex实现三列布局

版权声明

本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有,

本文仅用于学习、研究和交流目的。转载请注明出处、完整链接以及原作者。

原作者若认为本站侵犯了您的版权,请联系我们,我们会立即删除!

原文标题

css中的那些布局

原文链接

https://segmentfault.com/a/1190000005986314

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《税务信息系统网络日志留存工作指引》解读

    根据2017年正式实施的《中华人民共和国网络安全法》中第二十一条规定,网络运营者应当按照网络安全等级保护制度的要求,采取监测、记录网络运行状态网络安全事件的技术...

    安恒信息
  • 股权众筹鼻祖Naval Ravikant发表36条对于区块链乃至整个世界的思考,不得不读!

    区块链大本营
  • MWC2018直击:三大运营商发布5G白皮书,一场无声的5G战!(附白皮书下载)

    6月27日-6月29日,世界移动大会(MWC)在上海举行。5G(第五代移动通信技术)无疑是本届展会最大的主角。作为5G的重要推动者,中国移动、中国联通、中国电信...

    SDNLAB
  • 网络自动化和基于意图的网络(IBN)之入门篇

    基于意图的网络(IBN)可以重新定义应用程序和服务在企业网络中的交付方式,但在此之前,这个概念必须先跟市场营销的宣传分离,并开始实现其承诺的优势。 ? 从ARP...

    SDNLAB
  • 基于“意图”的网络究竟意欲何为?

    自Gartner在2017年首次创造了基于意图的网络(IBN)一词后,迅速世界范围内引起广泛热议。

    SDNLAB
  • 解读国产以太网卡虚拟化应用

    它是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机。(就如1栋大楼并不是一个企业在里面,而是由N多家各行各业的企业在里面办公)

    深圳市联瑞电子
  • 网络安全究竟是什么?

    “网络安全”是指任何活动旨在保护您的网络和数据的可用性和完整性。它包括硬件和软件技术。有效的网络安全管理对网络的访问。它针对的是一种不同的威胁,阻止他们进入或在...

    周俊辉

扫码关注云+社区

领取腾讯云代金券