日期:2014-05-17 浏览次数:20531 次
第三篇我们来探讨左右下布局。没有定宽,百分比自适应。
?
还是先看看效果图:
?
?然后上代码:
?
?
<div id="container"> <div id="wrapper"> <!-- 右侧content start --> <div id="content" class="red"> content </div> <!-- 右侧content end --> </div> <!-- 左侧navigation start --> <div id="navigation" class="yellow"> navigation </div> <!-- 左侧navigation end --> <!-- 下侧extra start --> <div id="extra" class="orange"> extra </div> <!-- 下侧extra end --> </div>
?
css代码:
?
?
#container{} /*外层容器没有限制*/ #wrapper{float:right;width:70%;} /*右侧做右浮动,宽度70%*/ #navigation{float:left;width:29.9%;} /*左侧做左浮动,宽度29.9%*/ #extra{clear:both;width:100%;} /*清除一下*/?
?