保持标题，图像和<ol>的第一个<li> </ol> </li>

Question

我正在为我的作品编写用户手册，这是一个应该可打印的文本。它是一个说明手册，其中经常出现以下序列：标题+图像（居中，在单独的行上）+编号列表（带指令步骤）

我希望标题，下面的图像和编号列表的第一项始终保持在一起，即永远不会分页，但我似乎无法找到一种方法。

我已经尝试在我的CSS中定义h1，img {page-break-after：avoid;}与img，ol {page-break-before：avoid;}一起定义，但是那些不是＆＃39;赶上。

我尝试将三人组合在一个带有表{page-break-inside：avoid;}的表中，但问题是如果我在第一个项目之后关闭表格，则不会尊重我的有序列表。 我不想将整个有序列表括在表格中，因为说明（及其相应的图片）无论如何都可以跨越几页。

我尝试了div而不是table，但是编号也没有被尊重，然后我尝试用p和随后的span来封闭三重奏。这些允许有序列表在第一个列表项之后正常继续，但它们再次不尊重{page-break-inside：avoid}。

任何优雅的解决方案？

Answer 1

一种解决方案是将图像放在第一个列表项中 然后进行一些定位以使布局正确，并在列表项上page-break-inside:avoid并完成。

<ol>
  <li>
    <figure>
      <figcaption>This is the picture</figcaption>
      <img src="http://lorempixel.com/100/100"/>
    </figure>
    This is point one.
  </li>
  <li>
    This is point two.
  </li>
  etc.

li {font-size:16px; line-height:20px; page-break-inside:avoid}
li:first-child {padding-top:120px; position:relative}
li:first-child figure {position:absolute; top:0; margin:0 0 0 -40px;}

请参阅jsFiddle。