Css 尽管有空位，驾驶员仍在向下移动_Css_Html_Layout

Css 尽管有空位，驾驶员仍在向下移动

css html layout

Css 尽管有空位，驾驶员仍在向下移动,css,html,layout,Css,Html,Layout,我准备在我的页面上尖叫，感觉像是一场真正的战斗。我正在尝试获取html应用程序的完整页面布局。我试图有两个主要的div，并排，我可以用js隐藏。我在每个div中也有一个44px高的头。我的问题是，我似乎无法阻止大内容流入第一个div，即使隐藏了溢出等等。我不能发布所有代码，但我应该能够发布相关部分。大部分代码与问题无关。我做了一个简单的例子，只是为了让它更容易看。提前谢谢。哦，还有一些关于让我投票支持答案的建议。不要试图改变列宽，我需要他们灵活的边界。提前谢谢 <!DOCTYPE html

我准备在我的页面上尖叫，感觉像是一场真正的战斗。我正在尝试获取html应用程序的完整页面布局。我试图有两个主要的div，并排，我可以用js隐藏。我在每个div中也有一个44px高的头。我的问题是，我似乎无法阻止大内容流入第一个div，即使隐藏了溢出等等。我不能发布所有代码，但我应该能够发布相关部分。大部分代码与问题无关。我做了一个简单的例子，只是为了让它更容易看。提前谢谢。哦，还有一些关于让我投票支持答案的建议。不要试图改变列宽，我需要他们灵活的边界。提前谢谢

<!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>


堆栈溢出
推我
我不想包装到菜单列中的大块文本。大块
我不想包装到菜单列中的文本。我想要的一大块文本
不换行到菜单列中。我不想包装成的大文本块
菜单栏。我不想包装到菜单列中的大块文本。
我不想包装到菜单列中的大块文本。大块
我不想包装到菜单列中的文本。大的文本块
我不想包装到菜单列中。我不想看到的大块文本
包装到菜单列中。我不想包装到菜单中的大文本块
专栏。我不想包装到菜单列中的大块文本。大的
我不想包装到菜单列中的文本块。大文本块
我不想包装到菜单列中。我想要的一大块文本
不换行到菜单列中。我不想包装成的大文本块
菜单栏。我不想包装到菜单列中的大块文本。
我不想包装到菜单列中的大块文本。

这是因为您只浮动

#主菜单

，而不是

#主视图

。在这种情况下，

#主视图

的内容将环绕

#主菜单

项

如果要阻止右菜单下的内容向左流动，只需为

#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 
    });
});

[编辑]：在调整浏览器大小时，您可能需要重新计算所有像素值，这是因为您使用了各种最小宽度和最大宽度，以及更具响应性的布局。要实现这一点，只需将上述代码包装到

.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)
});

为了完整起见，您可能希望了解如何使用

.resize（）

事件-当用户拖动窗口的调整大小手柄时，像Chrome这样的浏览器会连续触发事件，这可能会影响较慢计算机上的浏览器性能，或者如果

.resize（）中的计算太多

功能。

我不确定这是否适合您，但是为

div设置一个高度将帮助您实现您想要的。我已将min height
设置为特定值，并且还设置了height:auto以在有更多数据时提供帮助。它避免了文本流入菜单部分
这是JSFIDLE
这不适用于大块文本或页面宽度减小的情况。无用文本块的目的是为了证明这一点。很好，它隐藏了一些文本块的问题，但这不是一个解决方案。嗯，我不能用float#main视图复制这个结果，至少不能在ie中复制，我想这不是最好的测试浏览器，除了我希望也能在windows 8应用程序中使用它，我很确定它使用的是ie引擎。至于填充，由于菜单列的最小值、最大值和%，据我所知，这不是css可以解决的。您可以编辑我的JSFIDLE以显示您的工作解决方案吗？您仍然可以在尝试固定宽度时使用填充-只需使用框大小：边框框
；）刚刚编辑了我的答案，检查新的提琴。我不确定你是否弄乱了视图的大小，但这不是一个正确的解决方案。如果我能用桌子来做的话，我会很高兴的，但是里面的东西太多了。我知道这是一个棘手的问题，可能需要一个繁重的js解决方案。也许你的浏览器显示的内容与我的不同，但随着页面宽度变大或变小，文本仍然会开始滑下，但不会一直滑到左边缘，如果越大，就会在两个主div之间产生一个间隙，拆分标题。仅供参考，我目前正在使用ie10作为浏览器进行测试。实际上，它在IE上比在Chrome上看起来更好。如果你使用的是JS方法，那么你当然需要绑定resize（）事件，以便浏览器在调整大小时重新计算尺寸。