讓兩個DIV並排顯示，兩個DIV顯示

讓兩個DIV並排顯示，兩個DIV顯示

 一、使用display的inline屬性

Html代碼<div style="width:300px; height:auto; float:left; display:inline">AAAA</div> <div style="width:300px; height:auto; float:left; display:inline">BBBB</div>View Code

二、通過設定float來讓Div並排顯示

Html代碼 <style> 2 #left,#right {float:left;border:1px solid red; padding:10px;} 3 </style> 4 <div id= "main "> 5 <div id= "left "> 1111 </div> 6 <div id= "right "> 2222 <br> 2222 <br> 2222 </div> 7 <!-- 如果不用clear屬性可能會出現瀏覽器不相容問題,clear設這元素周圍沒有浮動元素 --> 8 <div style="clear:both"></div> 9 </div>View Code

三、對於兩個div並排，左邊為絕對寬度，右邊為相對寬度的，需要用到這種布局的情況比較多見，如左邊為導航，右邊為內容的頁面

    1、將最大的容器padding-left固定寬度，左邊的固定寬度的一塊position:absolute，然後right的一塊width為百分百

    2、 使用position:absolute。代碼如下。 

Html代碼  <style> 2 body{ margin:0; height:100%} 3 html{ height:100%} /*相容firefox的div高度100%*/ 4 #left{ position:absolute; top:0; left:0; width:200px; height:100%; background-color:#CCCCCC} 5 #right{ margin-left:200px; height:100%; background-color:#0099FF} 6 </style> 7 <div id="left">left</div> 8 <div id="right">right</div> View Code

 這段代碼主要涉及到以下兩點點比較重要的：

 （1）相容firefox實現div高度100%；
 （2）div絕對位置的妙用；在頁面配置的時候，position:absolute如果靈活的應用，可以達到很好的效果。

3、 使用float解決div左右布局，左為絕對寬度，右為相對寬度問題

Html代碼  View Code

 4、代碼如下。方法3可能沒有按照題目要求，但是可以達到一樣的頁面效果。主要是使用了div的float屬性。

Html代碼 <style> body{ margin:0; height:100%} html{ height:100%} /*相容firefox的div高度100%*/ #left{ width:200px; height:100%; background-color:#CCCCCC; float:left} #main{ width:100%; height:100%; background-color:#0099FF} </style> <div id="main"> <div id="left">left</div> Right </div> View Code