您的位置:首页 > IT资讯_互联网资讯 > 网站建设_营销网站建设_网站制作与开发 > 解析Web前端设计有关CSS两列布局的几种方案!
发表日期:2019-04-10 15:28:20 文章编辑:常桉网络建站公司 浏览次数:453
《解析web前端设计有关CSS两列布局的几种方案!》由【深圳网站建设公司】于2019年4月10日整理发布!
布局是CSS中一个很重要的部分,但也让很多开发人员头疼的是它很不好处理,比如像字体的大小、颜色等等难以把握,而常用的CSS布局也有很多种,包括水平居中、垂直居中、单列布局、多列布局等,以及flex布局,但今天要说的是在Web前端设计开发中经常见到的两列布局的情况,它的展示形式是把整个页面中的主体部分内容分两列呈现给用户,通常会是侧栏和主栏的关系。
这种由主栏和边栏组成的页面布局形式,抽象到css布局中可以大致分为以下几种情况:两列定宽布局;一列定宽一列自适应页面宽度布局;一列不定宽一列自适应页面宽度布局。下面我们逐一来分析这几种两列布局的css解决方案。
css两列布局
两列定宽布局:两栏宽度固定,在页面中居中显示。
两列定宽布局实现代码
通过css中的float极其clearfix属性实现了主栏660px宽,侧栏300px宽的两列布局。这里需要注意的是两栏总宽度应该在布局元素的父元素(class名为body的元素)上设置,一定要居中显示,另外不能忽略的是清除掉浮动的代码。
一列定宽一列自适应布局
通过HTML部分的代码,可以看出很简单的一个外部容器包含两个子元素,页面中一列固定宽度,一列自适应页面剩余宽度,整体处于页面居中位置。
方案一:使用float和margin和实现布局。
float和margin解决方案
给左侧设置float属性左浮动,右侧元素设置margin属性,让右侧main栏与side到达同一水平位置上,为了让效果展示更好,我们给div设置了一个高度,实际开发中,div会根据内容高度自动撑开,这种布局方式很常见而且支持大多数的浏览器。
方案二:使用float和overflow实现布局
float和overflow解决方案
通过 overflow 触发 BFC模式(BlockFormattingContext)块级格式化文本,而 BFC 不会重叠浮动元素,与外界的元素是隔离的,所以不会触发 IE6-浏览器的 haslayout 属性,不能兼容IE6。
方案三:双浮动+calc宽度
给左右两侧div都设置为浮动,然后利用calc方法动态计算右侧div的宽度同样可以达到这个效果。得到的代码如下所示。
双浮动+calc
通过以上的案例展示可以看出实现XSS两列布局的方式有很多种,不同的思路有不一样的解决办法,但具体需要用哪一个还是要看业务需要,两栏布局的使用较多的是在表格布局上,在一般情况下,一般不会只单独用一种布局,多种布局同时使用才是常态,才能实现最好的效果。
以上内容原创整理编辑,转载请注明:深圳网站建设公司>>http://www.changanseo.com/indexnews/jz/1385.html
日期:2020-04-30
日期:2020-04-30
日期:2020-04-30
日期:2020-04-30
日期:2020-04-30
日期:2020-04-30
日期:2020-04-30
日期:2020-04-30
日期:2020-04-30
日期:2020-04-30
深圳常桉网络是一家专注于深圳网站建设、网页设计制作与开发、营销型网站建设、微信公众号开发、深圳小程序开发、APP开发、网站seo优化等技术+策划+网络营销推广解决方案的综合型网站建设公司。致力于为企事业单位提供一站式、全方位整合网络品牌服务。是当前国内少数拥有移动端、pc端开发、策划、推广一体化服务经验的领先移动互联网营销咨询公司。我们目前直接服务的企业包括酷派手机、金蝶明珠会、华润万家、便利云街、趣垦教育、凯琳斯蒂、韩后、虎都男装等知名企业以及宝安地税、福田地税政府微信定制技术开发。
电话:158-2048-4986(何经理)
地址:深圳市龙岗区横岗街道力嘉路108号2013文化创客园B栋403
网址:www.changanseo.com
邮箱:hejunsheng126@qq.com
常桉网络小程序
常桉网络微信号
Copyright © 2017-2021版权所有. 深圳网站开发,小程序开发就找深圳常桉网络,为您提供优质网络服务! 网站建设地图 网站制作地图 粤ICP备16024877号