0

以下のhtmlコードがあります。wuiInPageNav を 2 つのセクションに分割する必要があります。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;
}
4

1 に答える 1

1

アップデート

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;}
于 2013-02-28T19:52:03.117 に答える