0

私はかなり単純なhtml構造であると信じているスタイルシートを作成しようとしていますが、私が望むものを達成することはできません.

html の構造は次のとおりです。

章(クラス: )で構成されます。.chapter

各章にはタイトルがあり、タイトルで始まります(クラス: .chapter-title)。

章は項目(クラス: .item) で構成されます。

項目は段落(クラス: .paragraph) で構成されます。

ドキュメントを印刷するとき、最初.chapter-titleのと の間で改ページしたくないし、 内で改ページしたくない。間の改ページは問題ありません。 .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 章とその最初の要素の間に改ページがあります。上記のバリエーションをいくつか試しましたが、これが必要なものに最も近いものです。それで、私が望むものを達成するためのスタイルシートはありますか?

heightの css属性.paragraphは、ドキュメントのサイズを人為的に「爆破」するためだけのものであることに注意してください。「実際の」ドキュメントでは、より多くのテキストがあり、さまざまな高さの .paragraphs が作成されます。

itemsに名前が変更された間違った要素を編集します。

4

1 に答える 1

0

css に追加:first-childしてみてください。これは css の素晴らしいサイトです。過去に私を大いに助けてくれました。

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

于 2013-09-06T07:57:17.947 に答える