div-css布局实例：两列一边宽度固定,另一边宽度自适应布局

这个布局其实在实际应用中是经常用到的, 比如我这个blog的布局结构也是这样的, 利用这个布局还可以延伸到三列去, 甚至更多的变化.

布局的难点是如何使宽度固定的一边跟宽度自适应的另一边相排在一行呢? 答案是利用负边距, 自适应的一边先负外间距固定宽度边的宽度值, 然后内嵌的层再外间距相同的宽度值就可以了! 是不是觉得我说得有点乱? 没问题, 看代码就不会乱的了!

结构部分:

<div id="main">
<div id="left_part">
<div id="in_left_part">
左边宽度为自适应, 利用负边距: <br />
#left_part { margin-right: -350px;}<br />
    #in_left_part { margin-right: 350px;}
</div>
</div>
<div id="right_part">
右边固定宽度, 宽度为350px;
</div>
</div>
样式部分:

#main { margin: 30px 0 10px; text-align: center;}
  #left_part { float: left; margin-right: -350px; width: 100%;}
    #in_left_part { margin-right: 350px; height: 300px; padding-top: 150px;}
  #right_part { float: right; background:#292928; width: 350px; height: 300px; line-height: 300px;}

掌握了这个布局, 在面对很多页面时会很有用的~
=========================================================

这样，对于布局的左右自适应和上下自适应就都有了比较好的解决方案了。:)

<!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">
<html>
<head>
<title> 两列一边宽度固定,另一边宽度自适应布局 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta id="robots" content="all" />
<meta id="author" content="iVane Hwang, ivane1984[at]gmail.com" />
<meta id="Copyright" content="I.K ShOw, iVane Hwang" />
<meta name="Description" content="两列一边宽度固定,另一边宽度自适应布局, Demo" />
<meta name="Keywords" content="两列一边宽度固定,另一边宽度自适应布局, Demo, webdesign,web2.0,life,xhtml,css,design,xhtml+css,网站重构,标准, ivane, hwang, katherine,ui" />
<link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
<!--
/* General Style Start */
body { font-size: 12px; font-family: Arial; color: #fff; background: #515151; height: 100%; line-height: 130%;}
/* General Style End */

/* Demo Style Start */
#main { margin: 30px 0 10px; text-align: center;}
  #left_part { float: left; margin-right: -350px; width: 100%;}
    #in_left_part { margin-right: 350px; height: 300px; padding-top: 150px;}
  #right_part { float: right; background: #292928; width: 350px; height: 300px; line-height: 300px;}
/* Demo Style End */
-->
</style>
</head>

<body>

<div id="ivane">
<p><strong>Code & Design by <a href="http://admincss.com">admincss</a>.&nbsp; No CopyRight &copy; 2008.</strong>&nbsp;&nbsp;<a href="http://www.admincss.com">Link About This Page</a></p>
</div>

<div id="main">
<div id="left_part">
<div id="in_left_part">
左边宽度为自适应, 利用负边距: <br />
#left_part { margin-right: -350px;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;#in_left_part { margin-right: 350px;}
</div>
</div>
<div id="right_part">
右边固定宽度, 宽度为350px;
</div>
</div>

</body>
</html>

提示：您可以先修改部分代码再运行

Category: web标准 , 2008/03/22 , 22:06 , 0 Comments , 559 Read

TOP