我正在尝试阻止以下文本块中断,强制“蓝色包”到右列。
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’s certificates for each guest</li>
<li>Favors: Lil’ Builders 12 oz. cup filled with your child’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; }
有什么想法可以让整个文本块移动过来吗?
答案 0 :(得分:3)
正确的属性实际上是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; */
}