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，或使用等于{{1}的宽度加右边距的填充。 }。

对于后一种解决方案：

#main-menu

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

[编辑]：根据您使用各种最小和最大宽度，以及更灵敏的布局，您可能希望在调整浏览器大小时重新计算所有像素值。要实现这一点，只需将上面的代码包装在$(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 }); });函数中：

.resize()

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

为了完整起见，您可能希望了解如何debounce $(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) });事件 - Chrome浏览器会在用户拖动窗口的调整大小手柄时连续触发事件，并且可能会影响较慢的计算机上的浏览器性能，或者如果.resize()函数中的计算量太多。

Answer 2

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

尽管可用空间，Div仍会向下移动

2 个答案: