防止文本块上的列中断？

Question

我正在尝试阻止以下文本块中断，强制“蓝色包”到右列。

HTML就是这样：

<h2 class="blue">Blue Package:</h2>
<p><strong>Thurs.</strong> $425.00 <strong>Friday-Sun</strong> $475.00</p>
<ul>
    <li>Party length:  2 hours</li>
    <li>12 guests. </li>
    <li>Each  additional child: $12.00</li>
    <li>1.5 hours of  creative building time in our building studio</li>
    <li>Enjoy pizza  or bagels for 12 children (plus the birthday child) in our party room</li>
    <li>Beverages</li>
    <li>Paperware</li>
    <li>Invites</li>
    <li>Thank yous</li>
    <li>12 mylar  balloons</li>
    <li>Builder&rsquo;s  certificates for each guest</li>
    <li>Favors: Lil&rsquo; Builders  12 oz. cup filled with your child&rsquo;s unique Lego creation or random Legos
    </li>
</ul>

我之前在使用以下CSS的整个段落上完成了它，但如果我在h2标签上放置相同的CSSstyling，它将不会强制h2到第二列。

 p {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid; column-break-inside: avoid; display: table; }

有什么想法可以让整个文本块移动过来吗？

Answer 1

正确的属性实际上是break-inside，但除了Internet Explorer 10之外，浏览器不能很好地支持。我听说使用page-break-inside可以在Firefox（Gecko）中使用，但并非总是如此。

p, ul {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid-column; /* CSS3, IE10+ */
    /* display: table; */
}