04.02.2009
20:27
2,099次浏览
0
这个布局其实在实际应用中是经常用到的, 布局的难点是如何使宽度固定的一边跟宽度自适应的另一边相排在一行呢? 答案是利用负边距, 自适应的一边先负外间距固定宽度边的宽度值, 然后内嵌的层再外间距相同的宽度值就可以了! 是不是觉得我说得有点乱? 没问题, 看代码就不会乱的了!
结构部分:
<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;}
