無法使用css按需分頁

Question

我正在嘗試為我認為相當簡單的html結構創建樣式表，但是我無法實現我想要的。

html的結構如下：

它由各章組成 （類： .chapter ）。

每章都有一個標題，並.chapter-title開頭（類： .chapter-title ）。

一章包含各項（類： .item ）。

一個項目由段落組成（類： .paragraph ）。

打印文檔時，我不希望在.chapter-title和第一個 .item之間.chapter-title .item ，並且希望在.item不進行.item 。 .item之間的分頁符是可以的。

這是我嘗試過的：

<!DOCTYPE html>
<html>
<head><!--{-->

  <title>Chapter, items and paragraphs</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <!--{--><style type='text/css'>

     body {
       font-family:Garamond;
     }

     .chapter {
        page-break-inside:avoid;
     }

     .chapter-title + .item {
        page-break-before:avoid;
     }

     .chapter-title {
        font-size: 30px;
        page-break-after:avoid;
     }

     .item {
        border: 1px dashed #ccc;
        page-break-inside:avoid;
     }

     .paragraph {
        height:5cm;
        border: 1px solid #7cf;
        margin:0.1cm;
     }

   </style><!--}-->

</head><!--}-->
<body><!--{-->

<div class='chapter'>
      <div class='chapter-title'>Chapter 1</div>

      <div class='item'>
        <div class='paragraph'>1 / 1 / Para 1</div>
      </div>

      <div class='item'>
        <div class='paragraph'>1 / 2 / Para 1</div>
        <div class='paragraph'>1 / 2 / Para 2</div>
      </div>

</div>

<div class='chapter'>
      <div class='chapter-title'>Chapter 2</div>

      <div class='item'>
        <div class='paragraph'>2 / 1 / Para 1</div>
        <div class='paragraph'>2 / 1 / Para 2</div>
      </div>

      <div class='item'>
        <div class='paragraph'>2 / 2 / Para 1</div>
      </div>

</div>

<div class='chapter'>
      <div class='chapter-title'>Chapter 3</div>

      <div class='item'>
        <div class='paragraph'>3 / 1 / Para 1</div>
        <div class='paragraph'>3 / 1 / Para 2</div>
      </div>

      <div class='item'>
        <div class='paragraph'>3 / 2 / Para 1</div>
      </div>

      <div class='item'>
        <div class='paragraph'>3 / 3 / Para 1</div>
        <div class='paragraph'>3 / 3 / Para 2</div>
        <div class='paragraph'>3 / 3 / Para 3</div>
      </div>

      <div class='item'>
        <div class='paragraph'>3 / 4 / Para 1</div>
        <div class='paragraph'>3 / 4 / Para 2</div>
      </div>

</div>


</body><!--}-->
</html>

如果已打印（鍍鉻，頁面大小為A4），則在第3章及其第一個元素之間會有分頁符。 我嘗試了上述幾種方法，但這是最接近我需要的方法。 那么，是否有樣式表可以完成我想要的工作？

請注意， .paragraph的css height屬性僅在此處用於人為地“放大”文檔的大小。 在“實際”文檔中，有更多文本，使.paragraphs的高度不同。

編輯錯誤的元素重命名為item 。

Answer 1

嘗試在您的CSS中添加:first-child ，這是CSS的絕佳網站，過去對我有很大幫助。

http://css-tricks.com/almanac/selectors/f/first-child/

無法使用css按需分頁

問題描述

1 個解決方案

解決方案1
0 2013-09-06 07:57:17

無法使用css按需分頁

問題描述

1 個解決方案

解決方案1 0 2013-09-06 07:57:17

解決方案1
0 2013-09-06 07:57:17