html左右排版css div並排html並排div並排置中css兩個div並排多個div並排div水平排列

讓兩個Div並排顯示 - 程式前沿

文章推薦指數： 80 %
投票人數：10人

讓兩個Div並排顯示一、使用display的inline屬性AAAA BBBB AAAA BBBB 二、通過 ...   

      
 1111 
      
 2222 
 2222 
 2222 
            
   
    1111 2222
2222
2222 三、對於兩個div並排，左邊為絕對寬度，右邊為相對寬度的，需要用到這種佈局的情況比較多見，如左邊為導航，右邊為內容的頁面   1、將最大的容器padding-left固定寬度，左邊的固定寬度的一塊position:absolute，然後right的一塊width為百分百   2、使用position:absolute。

程式碼如下。

  
left
  
right
   left right 這段程式碼主要涉及到以下兩點點比較重要的： （1）相容firefox實現div高度100%； （2）div絕對定位的妙用；在頁面佈局的時候，position:absolute如果靈活的應用，可以達到很好的效果。

 3、使用float解決div左右佈局，左為絕對寬度，右為相對寬度問題     
  
   body{margin:0;height:100%} html{height:100%} #left{width:150px;height:100%;float:left;_margin-right:-3px;background-color:yellow} #main{height:100%;background-color:green}  4、程式碼如下。

方法3可能沒有按照題目要求，但是可以達到一樣的頁面效果。

主要是使用了div的float屬性。

   
  
left
  Right  
    自己完成的例子    abcbbb AdvertisementAdvertisement写评论取消回覆很抱歉，必須登入網站才能發佈留言。

近期文章Vue中容易被忽視的知識點2019.12.09if我是前端Leader，談談前端框架體系建設2019.12.09Spark入門（一）用SparkShell初嘗Spark滋味2019.12.08Spark入門（二）如何用Idea運行我們的Spark項目2019.12.08Spark入門（三）Spark經典的單詞統計2019.12.08Spark入門（四）Spark的map、flatMap、mapToPair2019.12.08Spark入門（五）Spark的reduce和reduceByKey2019.12.08Spark入門（六）Spark的combineByKey、sortBykey2019.12.08Spark入門（七）Spark的intersection、subtract、union和distinct2019.12.08Spark實戰尋找5億次訪問中，訪問次數最多的人2019.12.08AdvertisementAdvertisement

請為這篇文章評分？

延伸文章資訊