css - 将标题、图像和 <ol> 的第一个 <li> 放在一起

Question

我正在为我的工作编写用户手册，这是一份应该可以打印的文本。这是一本使用说明书，经常出现以下顺序:标题+图像(居中，单独一行)+编号列表(带说明步骤)

我希望标题、下图和编号列表的第一项始终保持在一起，即永远不要分页，但我似乎找不到这样做的方法。

我尝试在我的 css 中定义 h1, img {page-break-after:avoid;} 与 img, ol {page-break-before:avoid;} 的组合，但这些并没有流行起来。

我尝试用 table{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 .