無法顯示大型樹結構

Question

在JSP頁面上，我們使用嵌套的div顯示了一個類似樹的結構樹。每個div的寬度在運行時計算。在運行時只給出「div1」的寬度，其他div的寬度在運行時用這個來計算。在這裏，我已經將它設置爲200px。

<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto"> 
    <div id="div2" style="background-color:yellow;height:200px;width:190px;"> 
     <div id="div3" style="background-color:blue;height:180px;width:180px;"></div> 
     <div id="div4" style="background-color:red;height:180px;width:50px;"></div> 
    </div> 
</div> 

現在問題是「div4」沒有被附加在「div3」的右邊。它被放置在下一行。由於那個樹結構正在受到干擾。如果我增加「div2」的寬度，那麼它被放置在右邊，然後水平滾動條即將到達所有不需要的情況。 我注意到了div的行爲，它垂直放置文本而不是水平放置。 任何想法如何使它工作？

Answer 1

這是你在想什麼？我創建了一個jsfiddle：http://jsfiddle.net/r6sPY/

只要div2的寬度小於div3和div4的總和，div4就不會附加到div3的右邊。但是再次，我不確定這是否是你想到的。

<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto"> 
<div id="div2" style="background-color:yellow;height:200px;width:190px;"> 
    <div id="div3" style="background-color:blue;height:180px;width:130px;float:left;"></div> 
    <div id="div4" style="background-color:red;height:180px;width:50px;float:left;"></div> 
</div> 
</div>