热搜：NVER node 开发 php

CSS 布局总结??变宽度布局_html/css_WEB-ITnose

2024-11-26 16:20:01
CSS 布局总结??变宽度布局_html/css_WEB-ITnose

变宽度布局

1-2-1 等比例变宽



总宽度设置 width: 85%; min-width: 650px; （关于IE6的min-width支持，可用）

content 设置 width: 66%; float: left;

side 设置 width: 33%; float: right;

加入clear 空div


HTML 结构： 

	    	1-2-1 等比例变宽            
Header
                                                        
Content Header
                                    
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    
                                                        
Side Header
                                    
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    
                                                                    			
footer footer footer footer footer footer footer footer
css： 

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 650px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#content{				border: 1px solid black;				background-color: #999;				width: 66%;				float: left;			}			#side{				border: 1px solid black;				background-color: #999;				width: 33%;				float: right;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

1-2-1 单列变宽


side 固定宽度，content 随窗口宽度变化

side设置 width: 200px; float: left;

在content外层加入 contentWrap，contentWrap 设置为 width: 100%; margin-right: -220px; float: right;

而content 设置为 margin-right: 220px;

这样就利用了wrap实现了content的宽度为 100%-320px


HTML 结构： 

	    	1-2-1 单列变宽            
Header
                                                                            
Content Header
                                            
                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        
                                                                                        
Side Header
                                    
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    
                                                                    			
footer footer footer footer footer footer footer footer

CSS： 

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 700px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#contentWrap{				width: 100%;				margin-right: -220px;				float: right;			}			#content{				border: 1px solid black;				background-color: #999;				margin-right: 220px;			}			#side{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#clear{				clear: both;			}			#footer{				border: 1px solid black;				background-color: #CCC;			}

1-3-1 单侧列宽固定




nav 固定宽度 width: 200px; float: left;

在content 和 side 外层加入两层 div：outerWrap 和 innerWrap 

outerWrap 设置为 width: 100%; margin-right: -210px; float: right;

innerWrap 设置为 margin-right: 210px;

然后content 和 side 相当于在 innerWrap 内部等比例变宽


HTML结构： 

	    	1-3-1 单侧列宽固定            
Header
                                                        
Nav Header
                                    
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    
                                                                	                                            
Content Header
                                                    
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                            
                                                                                        
Side Header
                                                    
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                            
                                                                                                                			
footer footer footer footer footer footer footer footer

CSS： 

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 800px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#nav{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#outerWrap{				width: 100%;				margin-right: -210px;				float: right;			}			#innerWrap{				margin-right: 210px;			}			#content{				border: 1px solid black;				background-color: #999;				width: 66%;				float: left;			}			#side{				border: 1px solid black;				background-color: #999;				width: 33%;				float: right;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

1-3-1 中间列宽固定


content 宽度固定

在 nav 和 side 分别加上外层 div ：navWrap 和 sideWrap

navWrap 设置为 width: 50%; margin-left: -210px; float: left;

nav 设置为 margin-left: 210px;

同理，sideWrap 和 side 也做类似的设置


HTML结构： 

	    	1-3-1 中间列宽固定            
Header
                                                                            
Nav Header
                                            
                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        
                                                                                
Content Header
                                    
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    
                                                                                        
Side Header
                                            
                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        
                                                                                                    			
footer footer footer footer footer footer footer footer

CSS： 

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 700px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#navWrap{				width: 50%;				margin-left: -210px;				float: left;			}			#nav{				border: 1px solid black;				background-color: #999;				margin-left: 210px;			}			#content{				border: 1px solid black;				background-color: #999;				width: 400px;				float: left;				margin-left: 10px;			}			#sideWrap{				width: 49.9%;				margin-right: -210px;				float: right;			}			#side{				border: 1px solid black;				background-color: #999;				margin-right: 210px;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

1-3-1 双侧列宽固定


nav 和 side 宽度固定

nav 设置为 width: 200px; float: left;

在 content 和 side 外层加上 outerWrap 和 innerWrap ，这样就相当于单列固定宽度的设置，nav 固定宽度

然后再在 content 外层加上 contentWrap ，也相当于在 innerWrap 内部单列固定宽度设置，side 固定宽度


HTML 结构： 

	    	1-3-1 双侧列宽固定            
Header
                                                        
Nav Header
                                    
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    
                                                                	                                                                        
Content Header
                                                            
                                    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                                    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                                
                                                                                                                                        
Side Header
                                                    
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                            
                                                                                                                			
footer footer footer footer footer footer footer footer

CSS： 

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 800px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#nav{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#outerWrap{				width: 100%;				margin-right: -210px;				float: right;			}			#innerWrap{				margin-right: 210px;			}			#contentWrap{				width: 100%;				margin-left: -110px;				float: left;			}			#content{				border: 1px solid black;				background-color: #999;				margin-left: 110px;			}			#side{				border: 1px solid black;				background-color: #999;				width: 100px;				float: right;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

1-3-1 中列和侧列宽固定

nav 和 content 固定宽度，side 外层加上 sideWrap ，相当于1-2-1单列变宽


HTML 结构： 

	    	1-3-1 中列和侧列宽固定            
Header
                                                                
Nav Header
                                    
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    
                                                                    
Content Header
                                    
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    
                                                                                        
Side Header
                                            
                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        
                                                                                        			
footer footer footer footer footer footer footer footer

CSS： 

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 800px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#nav{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#content{				border: 1px solid black;				background-color: #999;				margin-left: 10px;				width: 400px;				float: left;			}			#sideWrap{				width: 100%;				margin-right: -620px;				float: right;			}			#side{				border: 1px solid black;				background-color: #999;				margin-right: 620px;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}









本文是由用户编写整理，所有内容的版权归原作者所有。如果侵犯了您的权益，请联系我删除

相关推荐