如果你想在两列或三列布局中设置边框，你会发现边框只会延伸到content的高度，解决这个问题也可以用背景图片来让它看起来像边框。
最大宽度的样式
通过将 “margin: 1em 5%” 修改为 “margin: 0” 可以很容易的切换到最大宽度的样式
| 代码如下 |
|
#container
{
margin: 0; /* changed from 1em 5% */
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
} |
右侧导航的样式
通过修改 nav 为 float: right ，然后将背景图片右对齐，我们很容易的切换到右侧导航的样式。
| 代码如下 |
|
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
background-position: right; /* ADD THIS RULE */
}
#nav
{
float: right; /* WAS FLOAT LEFT */
width: 160px;
margin-right: 10px; /* WAS MARGIN-LEFT */
padding-top: 1em;
}
#content
{
padding-top: 1em;
margin: 0 200px 0 2em; /* SWAP ORDER */
} |
实例
| 代码如下 |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.111cn.net><html
lang="en"><head><meta
http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>自适应高度的两列页面布局（Two columns with colour） – 示例12 | CodeBit.cn</title>
<style type="text/css" media="screen">body{margin:0;padding:0;font-family:georgia,times,"times new roman",serif;color:#000;background-color:#ddd}#container{margin:1em
5%;background-color:#FFF;background-image:url(/wp-content/uploads/examples/two-columus-with-color/images/variation1.gif);background-repeat:repeat-y;border:1px
solid #333}#banner{background-color:#666;border-bottom:1px solid #333}#banner
h1{margin:0;padding: .5em}#nav{float:left;width:160px;margin-left:10px;padding-top:1em}#nav
p{margin-top:0}#content{padding-top:1em;margin:0
2em 0 200px}#content
h2{margin-top:0}#footer{clear:both;background-color:#666;padding:1em;text-align:right;border-top:1px solid #333}</style>
</head><body><div
id="container"><div
id="banner"><h1>Site name</h1></div><div
id="nav"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p></div><div
id="content"><h2> Page heading</h2><p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div><div
id="footer"> Footer stuff here</div></div></body></html
|
