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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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