0

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 の動作に気付きました。どうすればそれを機能させることができますか？

4

1 に答える 1

0

これはあなたが考えていたことですか？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>
于 2013-02-28T09:46:00.070 に答える