0

我正在尝试为我认为相当简单的 html 结构创建一个样式表，但我无法实现我想要的。

html的结构如下：

它由章节（类：）组成.chapter。

每章都有一个标题（类：）.chapter-title。

一章由项目（类：）组成.item。

一个项目由段落组成（类：）.paragraph。

打印文档时，我希望.chapter-title和first .item之间没有分页符，并且我希望.item. s之间的分页符.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>

如果打印 (chrome, page size A4) 我在第 3 章和它的第一个元素之间有一个分页符。我尝试了上述的一些变体，但这是最接近我需要的。那么，是否有一个样式表来完成我想要的？

请注意，这里的 cssheight属性.paragraph只是为了人为地“炸毁”文档的大小。在“真实”的文档中，文字较多，使得.paragraphs的高度不一。

编辑重命名为items的错误元素。

4

1 回答 1

0

尝试添加:first-child到你的 css 这里是一个很棒的 css 网站，它在过去帮助了我很多。

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

于 2013-09-06T07:57:17.947 回答