两侧列固定中间列变宽Div布局参考

最新推荐文章于 2021-06-04 06:15:02 发布

原创最新推荐文章于 2021-06-04 06:15:02 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #div #html

专业网站设计与开发专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了缘分的概念，通过生动的故事阐述了缘聚缘散的宿命论，同时表达了对创造奇迹的渴望。文章强调了在特定时间相遇的可能性对美好结局的影响，以及包容与妥协在爱情故事中的重要性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>两侧列固定中间列变宽2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body{
	font:12px/18px Arial;
	margin:0;
	}
#header,#footer {
	background:#CCCCFF;
	width:85%;
	margin:0 auto;
	}
#Nav {
	background:#dfC0FF;
	width:85%;
	margin:0 auto;
	}
h2{
	margin:0;
	padding:20px;
	}
p{
	padding:15px 20px;
	text-indent:2em;	
	margin:0;
	}
#container {
	width:85%;
	margin:0 auto;
	background:url(images/background-right.gif) repeat-y top right;
	position: relative;	
	}

#innerContainer {
	background:url(images/background-left.gif) repeat-y top left;
	}
#navi {
	width: 200px;
	position: absolute;
	left: 0px;
	top: 0px;
}
#content {
	right: 0px;
	top: 0px;
	margin-right: 200px;
	margin-left: 200px;
	}
#side {
	width: 200px;
	position: absolute;
	right: 0px;
	top: 0px;
	}
</style>
</head>
<body>
<div id="header">
	<h2>Page Header</h2>
</div>

<div id="container">
<div id="innerContainer">
	<div id="navi">
			<h2>Navi Bar</h2>
		<ul>
			<li>Home</li>
			<li>Web Design</li>
			<li>Web Dev</li>
			<li>Map</li>
			<li>Contact Us</li>
			<li>Home</li>
			<li>Web Design</li>
		</ul>
	</div>
	<div id="content">
		<h2>Page Content</h2>
		<p>
		生活中到处都存在着缘分，缘聚缘散好像都是命中注定的事情；有些缘分也许从一开始就注定要失去，有些缘分也许是永远都不会有结果；</p>
		<p>
		可是我却偏偏渴望创造一种奇迹。也许不是不曾心动，不是没有可能，只是有缘无份，情深缘浅，如果彼此出现早一点,也许就会有美好的结局,又或者相遇的时间再晚一点,晚到两个人在各自的爱情故事中经历了包容与体谅,善待和妥协，悲痛与快乐，到了那时也许走到一起就会有可能。</p>


	</div>
	<div id="side">
		<h2>Side Bar</h2>
		<ul>
			<li>Web Dev</li>
			<li>Map</li>
			<li>Contact Us</li>
		</ul>
	</div>
</div>
</div>
<div id="footer">
	<h2>Page Footer</h2>
</div>
</body>
</html>