Question

我有以下的HTML代码。我需要做的是将wuiInPageNav分成两部分。 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;
}

Answer 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;}

将页面分为两部分

1 个答案: