我一直试图解决这个问题一段时间,但我无法解决这个问题。我想弄清楚这是一个已知问题还是我只是做错了! :/
我试图在页面的最后<h2>
上让页面进入新页面(打印时)。但是,它似乎在每次第一次<h2>
之后就会中断,即使它不应该破坏到适合页面的最后一个<h2>
。
CSS代码:
@media print{
html, body {
width: 8.5in;
height: 11in;
margin: 0.5in;
}
h2:last-child {
page-break-after:always;
}
}
HTML CODE:
<meta charset="UTF-8" />
<title>Apple Bavarian Torte</title>
<script src="modernizr-1.5.js"></script>
<link href="dwbase.css" rel="stylesheet" />
<link href="dwlayout.css" rel="stylesheet" media="only screen"/>
<link href="dweffects.css" rel="stylesheet" media="only screen" />
<link href="dwprint.css" rel="stylesheet" media="only print" />
<header>
<div id="div1">
Recipes | Ingredients | Articles <br />
<input type="search" id="sbox" name="sfield" />
<input type="button" id="sbutton" value="Search" placeholder="search term" />
</div>
<div id="div2">
Password <br />
<input type="text" id="pwd" name="pwd" placeholder="password" />
<input type="button" id="lbutton" value="Log In" />
</div>
<div id="div3">
User Name <br />
<input type="text" id="user" name="user" placeholder="username" />
</div>
<h1>dessertWeb</h1>
<nav class="horizontal">
<ul>
<li><a href="#">recipes</a></li>
<li><a href="#">menus</a></li>
<li><a href="#">holidays</a></li>
<li><a href="#">market</a></li>
<li><a href="#">shopping</a></li>
<li><a href="#">columns</a></li>
<li><a href="#">messages</a></li>
</ul>
</nav>
</header>
<section id="left">
<nav class="vertical">
<h1>Categories</h1>
<ul>
<li><a href="#">Cakes</a></li>
<li><a href="#">Candies</a></li>
<li><a href="#">Chocolate</a></li>
<li><a href="#">Cookies</a></li>
<li><a href="#">Crisps</a></li>
<li><a href="#">Crumbles</a></li>
<li><a href="#">Custards</a></li>
<li><a href="#">Frozen Treats</a></li>
<li><a href="#">Gelatins</a></li>
<li><a href="#">Liqueur Desserts</a></li>
<li><a href="#">Marshmallows</a></li>
<li><a href="#">Meringues</a></li>
<li><a href="#">Mousse</a></li>
<li><a href="#">Pies</a></li>
<li><a href="#">Pralines</a></li>
<li><a href="#">Sauces</a></li>
<li><a href="#">Truffles</a></li>
</ul>
</nav>
<nav class="vertical">
<h1>Related Recipes</h1>
<ul>
<li><a href="#">Apple Crisp</a></li>
<li><a href="#">Apple Fingers</a></li>
<li><a href="#">Apple Streudel</a></li>
<li><a href="#">Cherry Torte</a></li>
<li><a href="#">Fruit Pie</a></li>
<li><a href="#">Parfait</a></li>
<li><a href="#">Strawberry Torte</a></li>
</ul>
</nav>
</section>
<section id="center">
<article>
<hgroup>
<h1>Apple Bavarian Torte
<img src="star.png" alt="3 1/2 stars" />
<img src="star.png" alt="" />
<img src="star.png" alt=""" />
<img src="halfstar.png" alt="" />
</h1>
<h2>by Lemking</h2>
</hgroup>
<img id="dishimg" src="torte.jpg" alt="Torte image" width="250" />
<p>A classic European torte baked in a springform pan. Cream cheese,
sliced almonds, and apples make this the perfect holiday treat
(12 servings).
</p>
<p><a href="#">Rate/Review</a> | <a href="#">Review Page</a></p>
</article>
<aside>
<h1>Recipe Box</h1>
<ul>
<li><a href="#">Add to Recipe Box</a></li>
<li><a href="#">Add to Shopping List</a></li>
<li><a href="#">Share Recipe</a></li>
<li><a href="#">Add to Menu</a></li>
<li><a href="#">Customize Recipe</a></li>
<li><a href="#">Share/Email</a></li>
</ul>
</aside>
<h2>Ingredients</h2>
<ul>
<li>1/2 cup butter</li>
<li>1/3 cup white sugar</li>
<li>1/4 teaspoon vanilla extract</li>
<li>1 cup all-purpose flour</li>
<li>1 (8 ounce) package cream cheese</li>
<li>1/4 cup white sugar</li>
<li>1 egg</li>
<li>1/2 teaspoon vanilla extract</li>
<li>6 apples - peeled, cored, and sliced</li>
<li>1/3 cup white sugar</li>
<li>1/2 teaspoon ground cinnamon</li>
<li>1/4 cup sliced almonds</li>
</ul>
<h2>Directions</h2>
<ol>
<li>Preheat oven to 450° F (230° C).</li>
<li>Cream together butter, sugar, vanilla, and flour.</li>
<li>Press crust mixture into the flat bottom of a 9-inch springform pan.
Set aside.</li>
<li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla.
Pour cheese mixture over crust.</li>
<li>Toss apples with sugar and cinnamon. Spread apple
mixture over all.</li>
<li>Bake for 10 minutes. Reduce heat to 400° F (200° C) and continue
baking for 25 minutes.</li>
<li>Sprinkle almonds over top of torte. Continue baking until lightly browned.
Cool before removing from pan.</li>
</ol>
</section>
<section id="right">
<h1>Reviews</h1>
<blockquote>
<p>
<img src="star.png" alt="4 stars" /> <img src="star.png" alt="" />
<img src="star.png" alt="" /> <img src="star.png" alt="" />
</p>
<p>I loved the buttery taste of the crust which complements the apples
very nicely.</p>
<p>
— Reviewed on Sep. 22, 2014 by MMASON.
</p>
</blockquote>
<blockquote>
<p>
<img src="star.png" alt="2 stars" /> <img src="star.png" alt="" />
</p>
<p>Nothing special. I like the crust, but there was a little too much
of it for my taste, and I liked the filling but there was too little
of it. I thought the crunchy apples combined with the sliced almonds
detracted from the overall flavor.</p>
<p>
— Reviewed on Sep. 1, 2014 by GLENDACHEF.
</p>
</blockquote>
<blockquote>
<p>
<img src="star.png" alt="3 1/2 stars" /> <img src="star.png" alt="" />
<img src="star.png" alt="" /> <img src="halfstar.png" alt="" />
</p>
<p>Delicious!! I recommend microwaving the apples for 3 minutes
before baking, to soften them. Great dessert - I'll be making it again
for the holidays.</p>
<p>
— Reviewed on August 28, 2014 by BBABS.
</p>
</blockquote>
</section>
<footer>
dessertWeb © 2014 English (US)
<span>
<a href="#">About</a>
<a href="#">Developers</a>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Help</a>
</span>
</footer>
答案 0 :(得分:2)
你要找的是“SECTION&gt; H2:last-of-type”,而不是“H2:last-child”,因为H2之后的OL是他们父母的最后一个孩子。
答案 1 :(得分:0)
由于我自己无法抓住最后一个&lt; H2&GT;所以我使用了这段代码:
h2:nth-last-child(2) {
page-break-before:always;
}