Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Commonly used methods and techniques for DIV CSS web page layout [transfer]_html/css_WEB-ITnose

Commonly used methods and techniques for DIV CSS web page layout [transfer]_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 12:28:48
Original
1110 people have browsed it

CSS布局常用的方法
float:none|left|right 
取值：
none:?默认值。对象不飘浮
left:?文本流向对象的右边
right:?文本流向对象的左边 

它是怎样工作的，看个一行两列的例子 
xhtml代码:

Example Source Code [www.52css.com]

 
这里是第一列
 
这里是第二列
 
 /*这是违背web标准意图的，只是想说明在它下面的元素需要清除浮动*/ 


CSS代码:

Example Source Code [www.52css.com]

#wrap{width:100;height:auto;} 
#column1{float:left;width:40;} 
#column2{float:right;width:60;} 
.clear{clear:both;}



position:static|absolute|fixed|relative
取值：
static:?默认值。无特殊定位，对象遵循HTML定位规则
absolute:?将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
fixed:?未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative:?对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 

它来实现一行两列的例子 
xhtml代码:

Example Source Code [www.52css.com]

 
这里是第一列
 
这里是第二列
 


CSS代码:

Example Source Code [www.52css.com]

#wrap{position:relative;/*相对定位*/width:770px;} 
#column1{position:absolute;top:0;left:0;width:300px;} 
#column2{position:absolute;top:0;right:0;width:470px;} 


他们的区别在哪？
显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

CSS常用布局实例
单行一列

Example Source Code [www.52css.com]

body{margin:0px;padding:0px;text-align:center;} 
#content{margin-left:auto;margin-right:auto;width:400px;} 


两行一列 

Example Source Code [www.52css.com]

body{margin:0px;padding:0px;text-align:center;} 
#content-top{margin-left:auto;margin-right:auto;width:400px;} 
#content-end{margin-left:auto;margin-right:auto;width:400px;} 


三行一列

Example Source Code [www.52css.com]

body{margin:0px;padding:0px;text-align:center;} 
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} 
#content-mid{margin-left:auto;margin-right:auto;width:400px;} 
#content-end{margin-left:auto;margin-right:auto;width:400px;}


单行两列

Example Source Code [www.52css.com]

#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 


两行两列

Example Source Code [www.52css.com]

#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 


三行两列

Example Source Code [www.52css.com]

#header{width:700px;margin-right:auto;margin-left:auto;} 
#bodycenter{width:700px;margin-right:auto;margin-left:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;} 



单行三列
绝对定位 

Example Source Code [www.52css.com]

#left{position:absolute;top:0px;left:0px;width:120px;} 
#middle{margin:0px190px0px190px;} 
#right{position:absolute;top:0px;right:0px;width:120px;} 



float定位一
xhtml代码:

Example Source Code [www.52css.com]

 
 
这里是第一列
 
这里是第二列
 
/*用法web标准不建议，但是记住下面元素需要清除浮动*/ 
 
这里是第三列
 
/*用法web标准不建议，但是记住下面元素需要清除浮动*/ 
 


CSS代码:

Example Source Code [www.52css.com]

#wrap{width:100;height:auto;} 
#column{float:left;width:60;} 
#column1{float:left;width:30;} 
#column2{float:right;width:30;} 
#column3{float:right;width:40;} 
.clear{clear:both;} 



float定位二
xhtml代码：

Example Source Code [www.52css.com]

 

Thisisthemaincontent.

 
 
 

Thisistheleftsidebar.

 
 
 

Thisistherightsidebar.

 


CSS代码：

Example Source Code [www.52css.com]

body{ 
margin:0; 
padding-left:200px;/*LCfullwidth*/ 
padding-right:190px;/*RCfullwidth CCpadding*/ 
min-width:200px;/*LCfullwidth CCpadding*/ 
} 
.column{ 
position:relative; 
float:left; 
} 
#center{ 
width:100; 
} 
#left{ 
width:200px;/*LCwidth*/ 
right:200px;/*LCfullwidth*/ 
margin-left:-100; 
} 
#right{ 
width:190px;/*RCwidth*/ 
margin-right:-100; 
}

Related labels：
DIV CSS网页布局常用的方法与技巧[转]
source：php.cn
Previous article：js controls the height of three columns of adaptive DIV CSS page_html/css_WEB-ITnose Next article：DIV CSS effect (to achieve smooth voting effect, etc.)_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2157
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2309
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1946
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1820
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1874
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template