当前位置: 网站建设 > 网页设计 > 建站经验 >

后端开发工程师的DIV+CSS两栏布局入门

时间:2013-03-02 03:57来源:未知 作者:admin 点击:

标签:后端开发工程师的DIV+CSS两栏布局入门 入门(8)两栏(1)工程师(2)中的(55)DIV+CSS(51)开发(17)后端(1)布局(72)
居中的 div 如何自适应高度? Tag:后端 开发工程师 Div+CSS 两栏布局 入门 后端 开发工程师 Div+CSS 两栏布局 入门 div 如何居中? 如果确切需要两栏占满全部浏览器窗口, 合理运用标签达到对页面及搜索引擎的优化 , 最好应用前面提到的一栏固定宽度 float, 另一栏 margin方式. 1. 两栏固定宽度或者比例宽度, 然后 float 2. 一栏固定宽度 float, 另一栏 margin 设置比例宽度或者固定宽度, 而后 margin-left 和 margin-righ
后端开发工程师的DIV+CSS两栏布局入门》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023394H013.htm
居中的 div 如何自适应高度? Tag:后端   开发工程师   Div+CSS   两栏布局   入门   后端   开发工程师   Div+CSS   两栏布局   入门   div 如何居中?

如果确切需要两栏占满全部浏览器窗口,合理运用标签达到对页面及搜索引擎的优化, 最好应用前面提到的”一栏固定宽度 float, 另一栏 margin”方式.

1. 两栏固定宽度或者比例宽度, 然后 float 2. 一栏固定宽度 float, 另一栏 margin

设置比例宽度或者固定宽度, 而后 margin-left 和 margin-right 为 auto,合同范围与需求分析后范围严重不符问题与分析.

--> [网站建设之]后端开发工程师的DIV+CSS两栏布局入门

padding 导致 width 扩展

<div class="main"> <div class="col_1"> </div> <div class="col_2"> </div> </div> .col_1{ float: left; width: 400px; } .col_2{ margin-left: 400px; }

当 main 不是固定宽度时, 使用此办法.

准确设置宽度, 是进行两栏布局的要害. 把两栏放在上面提到的 main 里.

当 div 内的元素 float 时, div 无奈自适应高度. 给 div 增长一个 100% 宽度的子 div, 所有内容放到该子 div 里:

假如对一个元素同时指定了 width 和 padding, 那么它实际的宽度是 padding-left + padding-right + width, 所以, 设置了固定宽度的 div, padding 必需设置为 0, 否则, 宽度便不是所冀望的.

当两栏所处的容器不是固定宽度时, 个别会用比例宽度来设置两栏, 但这种方法适应性十分差, 受 border, margin, padding 的影响, 所以两者的宽度和普通不是 100%. 当阅读器窗口小时, 两栏间距很紧, 当浏览器窗口放大时, 两栏又离得太远. 一旦不警惕设置了 border, margin, padding, 其中一个便会溜到另一个的下方, 似乎消散了一样.

如何进行两栏布局?

<div class=",各种跨浏览器兼容的 CSS 编码准则和技巧;main"> <div class="col_1"> </div> <div class="col_2"> </div> </div> .col_1{ float: left; width: 400px; } .col_2{ float: right; width: 400px; }

float左还右均可, 随你爱好. 无比推举这种布局方式, 由于只须要修正一两行CSS代码, 就能转变两栏的左右关联.

<div class="main"> <div class="main_inner"> </div> </div> .main{ margin: 0 auto; width: 800px; } .main_inner{ float: left; width: 100%; border: 1px solid #666; }

这样, main 也不自适应高度, 但新增添的 main 自适应高度了, 宽度也能固定, 也就是 main 的宽度,各种主流浏览器对HTML5的兼容性分析. main 的作用只有居中跟宽度的功效. 也就是说, 用两个 div 来配合, 一个实现高度, 一个实现宽度.

用比例宽度来设置两栏有什么不好?

<div class=",可变高宽的圆角框;main"> </div> .main{ margin: 0 auto; width: 800px; border: 1px solid #666; }


(责任编辑:网站建设)
后端开发工程师的DIV+CSS两栏布局入门相关文章
上一篇:合理运用标签达到对页面及搜索引擎的优化 下一篇:告别了纯流量的时代 粘度流量助我留住广告商
回到顶部