0

私はこのHTMLコードのブロックを持っています。私は wuiLeftArea と wuiMainArea が常に並んでいるのが好きです。現在、ブラウザ ウィンドウを縮小すると、WuiMainArea div が wuileftArea の下に移動します。wuiMainArea div を常に右側に配置する方法はありますか?

<div id="wuiLeftArea">
        <div id="wuiLefthandNavRoot">
            <div id="tree">
            </div>
    </div>
</div>

<DIV id=wuiMainArea sizcache="5" sizset="1">
    <DIV id=wuiMainContent sizcache="5" sizset="1">
        <DIV id=wuiInpageNav sizcache="5" sizset="1">
              <DIV id=chart class=wui-inpage-container style="float:right; width: 1200px;min-height:500px;display: block; overflow: hidden;">
              <p > this is the area to put charts. this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                        this is the area to put charts. 
                </p>
            </DIV>
        </DIV>
    </DIV>
</DIV>
4

3 に答える 3

1

これは、コンテナーに固定サイズがない限り、またはオーバーフローが明示的に設定されていない限り、常に発生します。そうしないと、コンテナーのサイズが変更されるたびに、その子が幅方向に本体に収まるように再配置されます。

于 2013-02-25T15:23:25.100 に答える
1

http://jsfiddle.net/XCEjf/

.wui-inpage-container {
    width: 50%;
}

相対幅を使用することで、フロートが常にページ幅に余裕を持たせ、折り返しを防ぐことができます。

于 2013-02-25T15:24:37.423 に答える
1

パーセンテージ ベースの長さを使用します。左のコンテナがページの 25% の幅を構成し、メインのコンテナが 75% の幅を構成する場合、ブラウザがどれほど小さくなっても、1/4 と 3/4 の分割があります。

于 2013-02-25T15:24:52.680 に答える