1

「青いパッケージ」を右側の列に強制して、次のテキストブロックが壊れないようにしようとしています。ここに画像の説明を入力

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 を使用して段落全体で以前に行ったことがありますが、同じ CSSstyling を h2 タグに配置すると、h2 だけが 2 列目に強制されることはありません。

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

このテキスト ブロック全体を移動させるためのアイデアはありますか?

4

1 に答える 1

3

正しいプロパティは実際break-insideには ですが、Internet Explorer 10 以外のブラウザーでは十分にサポートされてpage-break-insideいません。Firefox (Gecko) では using が機能すると聞きましたが、常にではありません。

p, ul {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid-column; /* CSS3, IE10+ */
    /* display: table; */
}
于 2013-08-12T14:47:33.807 に答える