1

我准备在我的页面上尖叫，感觉就像一场真正的战斗。我正在尝试为 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>
4

2 回答 2

2

那是因为你只是漂浮#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()函数中的计算过多。

于 2013-03-07T18:33:18.033 回答
1

我不确定这是否适合你，但为你设定一个高度div将帮助你实现你想要的。我已将 设置min-height为某个值，并设置height:auto为在有更多数据时提供帮助。它避免了文本流入菜单部分这是JSFiddle http://jsfiddle.net/gGt9S/2/

于 2013-03-07T18:36:40.873 回答