CSS布局??左定宽度右自适应宽度并且等高布局_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:34:23
Original
1018 Leute haben es durchsucht

方法一:

别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧。

HTML Markup

		<div id="container">			<div id="wrapper">				<div id="sidebar">Left Sidebar</div>				<div id="main">Main Content</div>			</div>		</div>	
Nach dem Login kopieren

CSS Code

		<style type="text/css">			* { margin: 0; padding: 0; }			html { height: auto; }			body { margin: 0; padding: 0; }			#container { background: #ffe3a6; }			#wrapper { display: inline-block; border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/ position: relative; vertical-align: bottom; }			#sidebar { float: left; width: 200px; margin-left: -200px;/*==此值等于左边栏的宽度值==*/ position: relative; }			#main { float: left; }				#maing,			#sidebar{ min-height: 200px; height: auto !important; height: 200px; }		</style>	
Nach dem Login kopieren

查看在线DEMO。

方法二

HTML Markup

		<div id="container">			<div id="left" class="aside">Left Sidebar</div>			<div id="content" class="section">Main Content</div>		</div>	
Nach dem Login kopieren

CSS Code

		<style type="text/css">			 	*{margin: 0;padding: 0;}			 	#container { overflow: hidden; }			 	#left { background: #ccc; float: left; width: 200px; margin-bottom: -99999px; padding-bottom: 99999px; }			 	#content { background: #eee; margin-left: 200px;/*==此值等于左边栏的宽度值==*/ margin-bottom: -99999px; padding-bottom: 99999px; }			 	#left,			 	#content { min-height: 200px; height: auto !important; height: 200px; }		</style>	
Nach dem Login kopieren

查看在线的DEMO。

方法三:

HTML Markup

		<div id="container">			<div id="content">Main Content</div>			<div id="sidebar">Left Sidebar</div>		</div>	
Nach dem Login kopieren

CSS Code

			*{margin: 0;padding: 0;}		 	#container{		 		background-color:#0ff;		 		overflow:hidden;		 		padding-left:220px; /* 宽度大小等与边栏宽度大小*/		 	}		 	* html #container{		 		height:1%; /* So IE plays nice */		 	}		 	#content{		 		background-color:#0ff;		 		width:100%;		 		border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/		 		margin-left:-220px;/* 宽度大小等与边栏宽度大小*/		 		float:right;		 	}		 	#sidebar{		 		background-color:#f00;		 		width:220px;		 		float:right;		 		margin-left:-220px;/* 宽度大小等与边栏宽度大小*/		 	}		 	#content,		 	#sidebar {		 		min-height: 200px;		 		height: auto !important;		 		height: 200px;		 	}	
Nach dem Login kopieren

查看在线DEMO效果。

方法四:

HTML Markup

		<div id="container2">			<div id="container1">					<div id="col1">Left Sidebar</div>					<div id="col2">Main Content</div>		 	</div>		</div>	
Nach dem Login kopieren

CSS Code

		*{padding: 0;margin:0;}		#container2 {		  	float: left;		  	width: 100%;		  	background: orange;		  	position: relative;		  	overflow: hidden;		  }		  #container1 {		  	float: left;		  	width: 100%;		  	background: green;		  	position: relative;		  	left: 220px;/* 宽度大小等与边栏宽度大小*/		  }     		  #col2 {		  	position: relative;		  	margin-right: 220px;/* 宽度大小等与边栏宽度大小*/		  }     		  #col1 {		  	width: 220px;		  	float: left;		  	position: relative;		  	margin-left: -220px;/* 宽度大小等与边栏宽度大小*/		  }	   			#col1,#col2 {				min-height: 200px;				height: auto !important;				height: 200px;			}	
Nach dem Login kopieren

查看在线DEMO。

方法五:

HTML Markup

		<div id="container1">			<div id="container">				<div id="left">Left Sidebar</div>				<div id="content">					<div id="contentInner">Main Content</div>				</div>			</div>		</div>	
Nach dem Login kopieren

CSS Code

		*{padding: 0;margin: 0;}		#container1 {			float: left;			width: 100%;			overflow: hidden;			position: relative;			background-color: #dbddbb;		}		#container {			background-color: orange;			width: 100%;			float: left;			position: relative;			left: 220px;/* 宽度大小等与边栏宽度大小*/		}		#left {						float: left;			margin-right: -100%;			margin-left: -220px;/* 宽度大小等与边栏宽度大小*/			width: 220px;		}		#content {			float: left;			width: 100%;			margin-left: -220px;/* 宽度大小等与边栏宽度大小*/		}		#contentInner {						margin-left: 220px;/* 宽度大小等与边栏宽度大小*/			overflow: hidden;		}				#left,		#content {				min-height: 200px;				height: auto !important;				height: 200px;		}	
Nach dem Login kopieren

查看在线DEMO。

针对上面的面试题要求,我一共使用了五种不同的方法来实现,经过测试都能在各浏览器中运行,最后我有几点需要特别提出:

上面所有DEMO中,要注意其方向性的配合,并且值要统一,如果您想尝试使用自己布局需要的宽度值,请对照相关代码环节进行修改; 上面所有DEMO中,没有设置他们之间的间距,如果您想让他们之间有一定的间距,有两种方法可能实现,其一在上面的DEMO基础上修改相关参数,其二,在相应的里面加上"div"标签,并设置其“padding”值,这样更安全,不至于打破你的布局 因为我们这里有一列使用了自适应宽度,在部分浏览器下,当浏览器屏幕拉至到一定的大小时,给我们带来的感觉是自适应宽度那栏内容像是被隐藏,在你的实际项目中最好能在“body”中加上一个“min-width”的设置。
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage