2013-02-28 122 views
0

我有以下的html代碼。我需要做的是將wuiInPageNav分成兩部分。 LeftArea和wuiMainPageNav,他們需要一直並肩。 LeftAre div將保存我的jstree節點,wauiMainPageNave div將保存我的圖表和數據等。當我執行以下操作時,左移左側,wuiMainPageNav移至右側。但是,當我調整瀏覽器窗口的大小時,wuiMainPageNave會下降到最低點。我如何確保LeftArea始終位於左側,wuiMainPageName始終位於右側,瀏覽器窗口的大小和大小?在這裏丟失。有任何想法嗎?將頁面劃分爲兩部分

div id="wuiLeftArea"> 
     <div id="wuiLefthandNavRoot"> 
      <h2 class="wui-hidden">Section Navigation</h2> 
      <h3 class="wui-navigation-title">Applicaion</h3> 
      <div id=tree></div> 
     </div> 
</div> 


<div id=wuiMainArea> 
    <div id=wuiMainContent> 
     <div id=wuiInpageNav> 

       <div id="top_chart" class="center"> </div> 

     </div> 
    </div> 
</div> 

CSS:

#wuiInpageNav {left:300px; float:right; width:1200px !important; overflow:hidden; } 
div#wuiLeftArea{ 
    float: left; 
    width: 16.25em; 
    background-color: #f2f4f5; 
    padding-top: .5833em; 
    position: relative; 
} 
+0

看來看去爲「2列布局」,你會發現你的答案 – DACrosby 2013-02-28 19:48:52

+0

此外,您的內嵌樣式無效。 'left'上的樣式不應該有逗號,'main'上的'float'必須設置爲「左」或「右」 - 而不是「左上」。 – DACrosby 2013-02-28 19:53:31

回答

1

UPDATE

確保你不這樣做你的CSS在線: http://jsfiddle.net/FE79R/1/

HTML

<div id=wuiMainArea> 
    <div id=wuiMainContent> 
     <div id=wuiInpageNav> 
      <div id="left"> 
       <div id="tree">tree</div> 
      </div> 
      <div id=main> 
       <div id="top_charts" class="center"> </div> 
        <div class="main1"> 
         <div id="top_chart1" class="center">top chart 1</div> 
         <div id="top_chart2" class="center">top chart 2</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#wuiInpageNav { width:300px; overflow:hidden; } 
#left { width:100px; float:left; position:relative; background-color:#f2f4f5;} 
#main { width:200px; float:left; background-color:orange;} 
+0

這太好了。一個小問題。當我降低瀏覽器尺寸時,主要潛水再次下降到左側div。我需要在左邊和左邊的主要區域在任何時候左側潛水。 – user1471980 2013-02-28 20:22:01

+0

給#wuiInpageNav一個硬px值,例如#wuiInpageNav {width:400px;溢出:隱藏; } – Lowkase 2013-02-28 20:23:46

+0

我真的很抱歉,但我需要得到這個工作,事實並非如此。我將修改原始帖子。 – user1471980 2013-02-28 20:56:47