深山老林

日志内容

2007-06-26[公告]本BLOG无限期停止更新

TAG：

近来把精力都转到了 CSS森林上了，所以这里的更新可能会停上一段时间。

谢谢大家以往对我的支持！:)

有兴趣的同学可以去CSS森林看看，虽然还刚建不久，也正因此需要你们的支持！

风的影子 @ 23:20 | 看个仔细 | 有话要说 1 | 引用 0 | 编辑

2007-06-04[原]二栏宽高自适应布局

TAG：CSS 原创布局

看了之前的《两列一边宽度固定,另一边宽度自适应布局》后，觉得iVane的方法还可以再优化一下的，比如可以少用一个div……

自适应的问题也是布局中常会遇到的问题，最早用负边界的方法解决了高度自适应，没想法现在用负边界同样可以解决宽度自适应的问题。来看看怎样做吧：

================HTML===================
<body>
<div id="top">top</div>
<div id="main">
<div id="midpart"><p>主要内容部分，宽高自适应。</p></div>
<div id="leftpart"><p>左栏宽200像素，高度自适应。</p></div>
</div>
<div id="bottom">bottom</div>
</body>
======================================

================CSS===================
#top,#bottom{
clear:both;
width:100%;
height:auto;
padding:10px 0;
background-color:#0099FF;
}
#main{
_width:100%;
height:auto;
overflow:hidden;
padding:0;
padding-left:200px;
color:#000000;
}
#leftpart,#midpart{
height:auto;
margin-bottom:-32767px;
padding-bottom:32767px;
}
#midpart{
float:right;
width:100%;
background-color:#00CC99;
}
#leftpart{
_display:inline;
float:left;
width:200px;
margin-left:-200px;
padding-top:30px;
background-color:#999900;
}
======================================