站长必读

您的位置:首页 > IT资讯_互联网资讯 > 网站建设_营销网站建设_网站制作与开发  >  解析Web前端设计有关CSS两列布局的几种方案!

解析Web前端设计有关CSS两列布局的几种方案!

发表日期:2019-04-10 15:28:20 文章编辑:常桉网络建站公司 浏览次数:453

《解析web前端设计有关CSS两列布局的几种方案!》由【深圳网站建设公司】于2019年410日整理发布!Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

布局是CSS中一个很重要的部分,但也让很多开发人员头疼的是它很不好处理,比如像字体的大小、颜色等等难以把握,而常用的CSS布局也有很多种,包括水平居中、垂直居中、单列布局、多列布局等,以及flex布局,但今天要说的是在Web前端设计开发中经常见到两列布局的情况,它的展示形式是把整个页面中的主体部分内容分两列呈现给用户,通常会是侧栏和主栏的关系。Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

CSS布局Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

这种由主栏和边栏组成页面布局形式,抽象到css布局中可以大致分为以下几种情况:两列定宽布局;一列定宽一列自适应页面宽度布局;一列不定宽一列自适应页面宽度布局。下面我们逐一来分析这几种两列布局的css解决方案。Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

css两列布局Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

两列定宽布局:两栏宽度固定,在页面中居中显示Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

css两列布局Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

两列定宽布局实现代码Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

通过css中的float极其clearfix属性实现了主栏660px宽,侧栏300px宽的两列布局。这里需要注意的是两栏总宽度应该在布局元素的父元素(class名为body的元素)上设置,一定要居中显示,另外不能忽略的是清除掉浮动的代码。因为屏幕尺寸和浏览器的差异,现实案例中这种固定宽度的页面已经不常见了,不过在前端学习阶段还是可以当练习使用的。Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

一列定宽一列自适应布局Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

通过HTML部分的代码,可以看出很简单的一个外部容器包含两个子元素页面中一列固定宽度,一列自适应页面剩余宽度,整体处于页面居中位置。Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

方案一:使用float和margin和实现布局。 Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

float布局Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

float和margin解决方案Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

给左侧设置float属性左浮动,右侧元素设置margin属性让右侧main栏与side到达同一水平位置上为了让效果展示更好,我们给div设置了一个高度,实际开发中,div会根据内容高度自动撑开,这种布局方式很常见而且支持大多数的浏览器。Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

方案二:使用float和overflow实现布局Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

CSS两列布局解决办法Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

float和overflow解决方案Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

通过 overflow 触发 BFC模式(BlockFormattingContext)块级格式化文本 BFC 不会重叠浮动元素与外界的元素是隔离的,所以不会触发 IE6-浏览器的 haslayout 属性不能兼容IE6Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

方案三:双浮动+calc宽度Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

给左右两侧div都设置为浮动,然后利用calc方法动态计算右侧div的宽度同样可以达到这个效果。得到的代码如下所示。Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

双浮动模式Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

双浮动+calcOfi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

通过以上的案例展示可以看出实现XSS两列布局的方式有很多种,不同的思路有不一样的解决办法,但具体需要用哪一个还是要看业务需要,两栏布局的使用较多的是在表格布局上,在一般情况下,一般不会只单独用一种布局,多种布局同时使用才是常态,才能实现最好的效果。Ofi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

以上内容原创整理编辑,转载请注明:深圳网站建设公司>>http://www.changanseo.com/indexnews/jz/1385.htmlOfi深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

标签:网站建设

热门标签

  • 低价透明 低价透明 统一报价,无隐形消费
  • 金牌服务 金牌服务 一对一专属顾问7*24小时金牌服务
  • 准时保质 准时保质 完善制作流程,准时交付
  • 售后无忧 售后无忧 网上追踪,全程跟进

深圳常桉网络是一家专注于深圳网站建设、网页设计制作与开发、营销型网站建设、微信公众号开发、深圳小程序开发、APP开发、网站seo优化等技术+策划+网络营销推广解决方案的综合型网站建设公司。致力于为企事业单位提供一站式、全方位整合网络品牌服务。是当前国内少数拥有移动端、pc端开发、策划、推广一体化服务经验的领先移动互联网营销咨询公司。我们目前直接服务的企业包括酷派手机、金蝶明珠会、华润万家、便利云街、趣垦教育、凯琳斯蒂、韩后、虎都男装等知名企业以及宝安地税、福田地税政府微信定制技术开发。

联系方式

    电话:158-2048-4986(何经理)

    地址:深圳市龙岗区横岗街道力嘉路108号2013文化创客园B栋403

    网址:www.changanseo.com

    邮箱:hejunsheng126@qq.com

常桉网络小程序 常桉网络小程序

常桉网络微信号 常桉网络微信号

Copyright © 2017-2019版权所有. 网站建设,小程序开发就找深圳常桉网络,为您提供优质网络服务!  网站建设地图  网站制作地图  粤ICP备16024877号

 
QQ在线咨询
何经理
15820484986