HTML將一個部分拆分爲兩列

我想將頁面拆分爲兩部分。一個左側區域和右側將成爲內容頁面。我有以下的HTML，但看起來不工作。任何想法，我不正確的做法？HTML將一個部分拆分爲兩列

<div id="wuiMainArea"> 
    <div id="wuiMainContent"> 

     <div id="wuiLeftArea"> 
     <div id="wuiLefthandNavRoot"> 
      <h2 class="wui-hidden">Section Navigation</h2> 
      <h3 class="wui-navigation-title"><p>Applications</p><p>&nbsp;</p></h3> 
      <div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div> 
     </div> 
     </div> 

     <div id="wuiInpageNav"> 
      <div class="wui-inpage-container" id="in_100"> 
       <p>This is the div I will be using for charts </p> 
      </div> 
     </div> 

     </div> 
</div>

來源

2013-02-22 user1471980

像這樣

<div id="wuiMainArea" style="border: 1px solid;"> 
    <div id="wuiMainContent" style="border: 1px solid;"> 

     <div id="wuiLeftArea" style="border: 1px solid;float: left;"> 
      <div id="wuiLefthandNavRoot"> 
       <h2 class="wui-hidden">Section Navigation</h2> 
       <h3 class="wui-navigation-title"><p>Applications</p><p>&nbsp;</p></h3> 
       <div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div> 
      </div> 
     </div> 

     <div id="wuiInpageNav" style="border: 1px solid; float: left;"> 
      <div class="wui-inpage-container" id="in_100"> 
       <p>This is the div I will be using for charts </p> 
      </div> 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
</div>

來源

2013-02-22 17:38:52 Winston

嗨溫斯頓，我這樣做，我沒有看到第二個div中的文字：

這是我將用於圖表的div div

– user1471980 2013-02-22 18:09:28

@ user1471980爲什麼你看不到？看看http://my.jetscreenshot.com/demo/20130222-bafs-42kb.jpg或者我不是很瞭解你？ – Winston 2013-02-22 18:14:05

可能是取決於你的CSS – smartmeta 2013-02-22 18:15:14

#wuiMainArea, #wuiMainContent{ 
    margin: 0 auto; 
    width: 960px; 
} 

#wuiLeftArea, #wuiInpageNav{ 
/* use half of the main content div's width */ 
/* -2 because of 1px-border on both sides */ 
    width: 478px; 
    display: inline-block; 
    float: left; 
}

這將是更好地使用CSS樣式HTML。定義適合您需要的寬度。另外，我建議在向多個元素應用相同樣式時使用類而不是ID。

來源

2013-02-22 19:04:41 keroyu

HTML將一個部分拆分爲兩列

回答

相關問題