一个自适应的宽度的两列网页布局
浏览数：13 /
时间：2015年06月09日
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位:一栏固定,一栏自适应</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
background:#fff;
font:12px normal Arial #444;
line-height:18px;
text-align:center;
}
#box {
width:100%;
height:500px;
margin:0 auto;
background:#f2f2f2;
}
.header {
width:100%;
height:30px;
background:#39c;
}
.right {
width:240px;
height:400px;
background:#fff;
position:absolute;
right:20px;
top:50px;
}
.left {
margin-right:280px;
margin-top:20px;
background:#fff;
margin-left:40PX;
height:400px;
}
.content {
width:96%;
height:300px;
margin:0 auto;
background:#444;
}
.footer {
width:100%;
height:100px;
background:#f2f2f2;
}
p {
padding:10px 10px;
font-size:16px;
font-weight:bold;
color:#39C;
line-height:22px;
}
//
-->
</style>
</head>
<body>
<div id="box">
<div class="header"><span style="color:#fff; font-size:14px;font-weight:bold; line-height:28px;">头部自适Div</span></div>
<div class="left">
<p>左则自适应缩放</p>
<div class="content">
<p>内容区块,相对父元素按百分比适应</p>
</div>
</div>
<div class="right">
<p>绝对固宽定位的右侧栏>
</div>
<div class="footer">
<p>底部自适应</p>
</div>
</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位:一栏固定,一栏自适应</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
background:#fff;
font:12px normal Arial #444;
line-height:18px;
text-align:center;
}
#box {
width:100%;
height:500px;
margin:0 auto;
background:#f2f2f2;
}
.header {
width:100%;
height:30px;
background:#39c;
}
.right {
width:240px;
height:400px;
background:#fff;
position:absolute;
right:20px;
top:50px;
}
.left {
margin-right:280px;
margin-top:20px;
background:#fff;
margin-left:40PX;
height:400px;
}
.content {
width:96%;
height:300px;
margin:0 auto;
background:#444;
}
.footer {
width:100%;
height:100px;
background:#f2f2f2;
}
p {
padding:10px 10px;
font-size:16px;
font-weight:bold;
color:#39C;
line-height:22px;
}
//
-->
</style>
</head>
<body>
<div id="box">
<div class="header"><span style="color:#fff; font-size:14px;font-weight:bold; line-height:28px;">头部自适Div</span></div>
<div class="left">
<p>左则自适应缩放</p>
<div class="content">
<p>内容区块,相对父元素按百分比适应</p>
</div>
</div>
<div class="right">
<p>绝对固宽定位的右侧栏>
</div>
<div class="footer">
<p>底部自适应</p>
</div>
</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
