Question

我有这个html代码块。我喜欢wuiLeftArea和wuiMainArea始终并排。现在，当缩小brwoser窗口时，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>

Answer 1

除非容器上有固定大小或明确设置溢出，否则总会发生这种情况;否则，每当任何容器调整大小时，它都会重新安排它的孩子在宽度方面适合身体。

Answer 2

http://jsfiddle.net/XCEjf/

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

通过使用相对宽度，您可以使浮点数始终在页面宽度中占据空间，从而阻止换行。

Answer 3

使用基于百分比的长度。如果左侧容器构成页面宽度的25％且主容器构成75％宽度，那么无论浏览器变小多少，您都将获得1/4 3/4分割

并排排列两个div

3 个答案: