关于定位问题
怎么左右固定宽度,中间自适应宽度,在一行显示
怎么左右固定宽度,中间自适应宽度,在一行显示
2016-11-08
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb-2312" />
<title>三列布局</title>
<style type="text/css">
* {margin:0;padding:0;}
.top {height:100px;background:#9F0;}
.head {width:800px;line-height:100px;margin:0 auto;text-align:center;font-size:40px;font-
weight:bold;}
.main {width:800px;height:600px;margin: 0 auto;background:yellow;position:relative;}
.left {width:200px;height:600px;background:#00F;position:absolute;left:0;top:0;}
.middle{height:600px;background:red;margin:0 110px 0 210px;}
.right{width:100px;height:600px;position:absolute;right:0;top:0;background:#F36;}
.foot{height:80px;background:#0F0;}
</style>
</head>
<body>
<div class="top">
<div class="head">head</div>
</div>
<div class="main">
<div class="left"><h3>left</h3></div>
<div class="middle"><h3>middle</h3>设计首页的第一步是设计版面布局。就象传统的报刊杂志编
辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始
趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通
的,你可以领会要点,举一反三。</div>
<div class="right"><h3>right</h3></div>
</div>
<div class="foot">foot</div>
</body>
按照这个改就行了
举报