css+div页面布局 -- float和margin

浮动?float 属性：定义元素在哪个方向浮动。float：left ?|?right |??none

? ? ? ? ? ? ? ? ? ? ? ?浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

外边距?margin属性：百分数是相对于父元素的 width 计算的。

?

页面div：

?

 <div id="container"> <div id="wrapper"><!-- 主体文字 --><div id="content"><p><strong>1) Content here.</strong></p></div> </div> <div id="navigation"><p><strong>2) right part here.</strong></p></div> <div id="extra"><p><strong>3) left part here.</strong></p></div>  </div>

?

?

1:2:1自适应布局：

?

?

<style type = "text/css">div#wrapper{float:left;width:100%}div#content{margin: 0 25%;width:100%;}div#navigation{float:left;width:25%;margin-left:-25%;background:#B9CAFF}div#extra{float:left;width:25%;margin-left:-100%;background:#FF8539}</style>

?

?

?2:1:1自适应布局：

?

?

  <style type = "text/css">div#wrapper{float:left;width:100%}div#content{margin-left:50%;width:100%;}div#navigation{float:left;width:25%;margin-left:-50%;background:#B9CAFF}div#extra{float:left;width:25%;margin-left:-25%;background:#FF8539}  </style>

?

?

1:1:2自适应布局：

?

?

<style type = "text/css">div#wrapper{float:left;width:100%}div#content{margin: 0;width:100%;}div#navigation{float:left;width:25%;margin-left:-100%;background:#B9CAFF}div#extra{float:left;width:25%;margin-left:-75%;background:#FF8539} </style>