三沣开发知识 购物 网址 游戏 小说 股票 美女 租车 短信 新闻 笑话 | 开发 汉字 下载 软件 图书馆
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 两栏自适应布局延展到多栏自适应布局 -> 正文阅读
 

[Html-Css]两栏自适应布局延展到多栏自适应布局

两栏自适应布局延展到多栏自适应布局 1、网上很多文章了,为什么还要讲?
   说到两栏自适应布局,估计很多人看到这样类似的文章,我经常也看过,但是那些实现方式跟我所经常使用的两种方法不一样,经常使用的意思是,我一遇到这种布局,立马想到的就是使用这种。就像我们拿东西,我们立马就会想到用手拿,当然还有很多方式可以拿到,比如用嘴刁。 所以,当我们看到多种实现方式的时候,一定要学会比较,然后选择其中一两种作为常用布局记到深处,就是想都不用想就用的。 
2、先看效果,自己先看看,如果懂了,就不要看其他解释文字了, 节约时间
See the Pen Layouts by wenjie (@wenjie) on CodePen.
点击右上角那个 CodePen Logo可以在新页面看,大点看对眼睛好
3 、解释一下 
  overflow方式主要原理: 固定宽度(block设置了宽度,或者inline-block元素自己的宽度)那一块浮动起来,放在最前面;自适应那一块一定要放在最后,宽度不能设置即宽度要为auto,设置overflow为hidden或者scroll等(目的形成BFC。overflow为visible不能形成BFC,其他都可以,自己可以搜索文章看看)。
       table-cel l方式主要原理:原理跟overflow类似,唯一不同的是它设置了一个很大很大的宽度,由于table-cell有自己的最大宽度,所以我们设置很大是为了 到达它的最大宽度,也就是浏览器的边缘吧。
      margin负值在网上写得风生水起,但个人不是很喜欢使用,我认为它的唯一优点就是能把自适应内容的标签放在了最前面 ,使SEO更友好,因为SEO一进来就获取到了最重要的内容。 但margin负值会增加更多的难度,设置甚至排查问题可能会花更多时间。所以margin负值我就是学一学的姿态,用不用取决于心情。
4、 多栏布局
     延展到多栏布局,是一样的,其实没啥可说的,就是把所有固定宽度的栏目放在最前面浮动起来,把自适应的部分放在最后即可。
5、几点地方要注意
      因为用了浮动,所以记得父容器清除浮动,比如我直接用overflow:auto清除浮动、也可以用我们常写的 class=clearfix。
      如果是英文网站或者文章里面有英文 还要考虑长英文单词的时候,这个时候如果单词在边缘就会被截断,这个时候,自适应的容器就要加上 word-wrap: break-word; 进行处理。
6、其他几种方式
      还有其他很多很多种方式,大家随便一搜就能搜到,比如CSS3的 calc(100% - x)这个其实我在移动端也经常使用,它的缺点就是旧版浏览器的兼容问题。
7、工作繁忙,没啥时间,文章粗糙
     文章中可能有错别字造成难以理解的,也请指出,若不影响大家吸收主要内容就算了吧,O(∩_∩)O哈哈~,若有知识性错误请不要吝啬指正,提前感谢。
  Html-Css 最新文章
CSS z
25个Web前端开发工程师必看的国外大牛和酷站
清除浮动的几种方式
去除inline
CSS布局
HTML&CSS——使用DIV和CSS完成网站首页
Css 书写规范【转】
css常用属性总结之 id和class的区别,使用类
CSS实现背景透明,文字不透明(兼容各浏览器
CSS select样式优化 含jquery代码
上一篇文章      下一篇文章      查看所有文章
加:2017-08-12 23:26:21  更:2017-08-12 23:26:25 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-8-19 4:13:27
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库