盡管可用空間，Div仍會向下移動

Question

我已經准備好在我的頁面上尖叫，感覺就像一場真正的戰斗。 我正在嘗試為html應用程序獲取完整頁面布局。 我試圖讓兩個主要的div並排，我可以用js隱藏。 我在每個div中也有一個44px的高標題。 我的問題是，我似乎無法保持大量內容流入第一個div，即使溢出隱藏等等。 我無法發布所有代碼，但我應該能夠發布相關部分。 大部分代碼與問題無關。 我做了一個JSfiddle只是為了讓它更容易看到。 提前致謝。 哦，以及一些關於讓我的投票回答的提示。 不要試圖改變列寬，我需要它們靈活的邊界。 提前致謝！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <title>Stack Overflow</title>
</head>
<body>
    <div id="page-holder">
        <div id="main-menu" class ="menu-width">
            <div class="wide vert-center-right header large">
                <div>
                <input id="search" type="text" class="search"/>
                <img class="visible-phone" src="css/images/logo.png" />
                </div>
            </div>
            <div id="menu-body" class="menu-body">
                <button class="wide small vert-center-left">Push Me</button>
            </div>
        </div>
        <div id="main-view" class="view-width">
            <div id="view-header" class="header view-header vert-align-left">
                <a href="#" class="visible-phone" onclick="resized()"><img class="plain" src="css/images/header-icon-back-18x18.png"/></a>
                <img src="css/images/header-logo.png" />
            </div>
            <div id="view-body" class="view-body">
                Large block of text that I want to not wrap into menu column. Large block of 
                text that I want to not wrap into menu column. Large block of text that I want 
                to not wrap into menu column. Large block of text that I want to not wrap into 
                menu column. Large block of text that I want to not wrap into menu column. 
                Large block of text that I want to not wrap into menu column. Large block 
                of text that I want to not wrap into menu column. Large block of text that 
                I want to not wrap into menu column. Large block of text that I want to not 
                wrap into menu column. Large block of text that I want to not wrap into menu 
                column. Large block of text that I want to not wrap into menu column. Large 
                block of text that I want to not wrap into menu column. Large block of text 
                that I want to not wrap into menu column. Large block of text that I want to 
                not wrap into menu column. Large block of text that I want to not wrap into 
                menu column. Large block of text that I want to not wrap into menu column. 
                Large block of text that I want to not wrap into menu column. 
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
</body>
</html>

Answer 1

那是因為你只是浮動#main-menu而不是#main-view 。 在這種情況下， #main-view的內容將環繞#main-menu項。

如果要阻止右側內容從左側菜單下方向左流動，只需將浮點數指定給#main-view ，或使用相當於#main-menu寬度加右邊距的填充。

對於后一種解決方案：

$(document).ready(function() {
    var offset_left = $("#main-menu").width() + parseInt($("#main-menu").css("marginRight")); /* Also added the calculated right margin (currently 0), just in case you decided you want more spacing between the menu and content */

    $("#main-view").css({
        "padding-left": offset_left 
    });
});

http://jsfiddle.net/teddyrised/gGt9S/3/

[編輯]：根據您使用各種最小和最大寬度，以及更靈敏的布局，您可能希望在調整瀏覽器大小時重新計算所有像素值。 要實現這一點，只需將上面的代碼包裝在.resize()函數中：

$(document).ready(function() {
    $(window).resize(function() {
        // Calculate the necessary offset
        var offset_left = $("#main-menu").width() + parseInt($("#main-menu").css("marginRight")); /* Also added the calculated right margin (currently 0), just in case you decided you want more spacing between the menu and content */

        // Assign left offset as padding
        $("#main-view").css({
            "padding-left": offset_left 
        });
    }).resize();

    // Note: we fire resize() once when the window loads so that everything is calculated properly the first time the page loads (because by default, resize() is not triggered upon page load)
});

http://jsfiddle.net/teddyrised/gGt9S/4/

為了完整起見，您可能需要研究如何去抖動 .resize()事件 - 當用戶拖動窗口的調整大小句柄時，Chrome等瀏覽器會持續觸發事件，並可能影響較慢計算機上的瀏覽器性能，或者如果你在.resize()函數中有太多的計算。

Answer 2

我不確定這是否適合你，但為你的div設置一個高度將幫助你實現你想要的。 我已將min-height設置為某個值，並設置height:auto以在有更多數據時提供幫助。 它避免了文本流入菜單部分這是JSFiddle http://jsfiddle.net/gGt9S/2/

盡管可用空間，Div仍會向下移動

問題描述

2 個解決方案

解決方案1
2 已采納 2013-03-07 18:33:18

解決方案2
1 2013-03-07 18:36:40

盡管可用空間，Div仍會向下移動

問題描述

2 個解決方案

解決方案1 2 已采納 2013-03-07 18:33:18

解決方案2 1 2013-03-07 18:36:40

解決方案1
2 已采納 2013-03-07 18:33:18

解決方案2
1 2013-03-07 18:36:40