div三栏布局,右侧自适应宽度代码示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title>3列流体布局(s1-s2-c)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="author" content="MarVel" />
<style type="text/css">
/* <![CDATA[ */
* {margin:0; padding:0;}
body, html {width:100%;}
#wrapper {position:relative; padding-left:350px; background:yellow; overflow:hidden; display:inline-block;}
.content {width:100%; background:#ccc; float:left;}
.sidebar1 {position:relative; left:-350px; _left:0; width:200px; height:500px; background:red; float:left; margin-left:-100%;}
.sidebar2 {position:relative; left:-150px; _left:200px; width:150px; height:300px; background:orange; float:left; margin-left:-100%;}
/* ]]> */
</style>
</head>
<body>
<div id="wrapper">
<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div class="sidebar1">sidebar-1</div>
<div class="sidebar2">sidebar-2</div>
</div>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>
有话要说