防止2个div元素之间的分页符

Question

我现在有很大的问题。 它仅在Firefox（使用FF10测试）中困扰，在Chrome 17或任何IE中都不会发生此错误。

就是这个 我有一个看起来像这样的页面架构

<div id="container">
    <div id="a">
        <img src="foo/bar.png" />
    </div>
    <div id="b">
        <div id="c">
            <!--short content-->
        </div>
        <div id="d">
            <!--long content-->
        </div>
    </div>
</div>

编辑：有人要求CSS的一部分。 我的代码在这里做了很多简化，这是要匹配的css的简化版本。

#container {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

#a{
    height: 156px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 2px;
    width: 918px;
}

#b {
    background-color: #FFFFFF;
    font-size: 12px;
    margin: 0 auto;
    text-align: left;
    width: 958px;
}

#c{
    background: url("images/top_content.gif") no-repeat scroll left top #FFFFFF;
    height: 50px;
    margin: 0 auto;
    width: 100%;
}

#d{
    padding: 40px 0px;
}

作为奖励，＃d div的计算高度为874px（使用萤火虫计算）

还应指出，当内容足够短以适合页面时，内容部分（#d）将没有分页符，而是停留在第一页上。

仅当例如在chrome中，我可以看到#d的内容在第二页上流血时才会发生。

所以这是问题。 如何防止#c和#d div之间出现换行符？

Answer 1

您的意思是在打印时如何防止分页？

#c{
    page-break-after: avoid;
}

#d {
    page-break-before: avoid;
}

请注意，“新”方式是使用通用的break-before和break-after如下所示：

#c{
    break-after: avoid-page;
}

#d {
    break-before: avoid-page;
}

但是尚不支持所有浏览器。 参见https://developer.mozilla.org/en-US/docs/Web/CSS/break-before和https://developer.mozilla.org/en-US/docs/Web/CSS/break-after

Answer 2

我来到这里，遇到了同样的问题。 我找到了解决方案！

我的情况 ：

• 我有一个div作为标题
• 然后另一个div包含很长的前置
• 预先跨越多个页面

范例 ：

<div>Heading</div>
<div>
    <pre>Very long pre.</pre>
</div>

问题 ：

• 我的标题Div出现在第1页
• pre从第2页开始-因此“标题”和内容之间存在巨大差距。

解决方案：

最后，我尝试display: inline预样式display: inline 。 多田！ 现在我的标题div和pre的开头一起从第1页开始！

也许您可以弄乱元素的显示以更好地控制它。 希望这对任何可能再次在这里跌倒的人有所帮助！