如果元素影响将元素作为一个元素一起移动到新页面，则Epub分页符

Question

在写一个epub文件时我有一些与某些文本直接相关的图像我试过将它们作为一个块放在div中并浮动但是一旦在阅读器中文本移动到一个新行，我想确定是否将文本移动到新页面，图像跟随它，就像一个元素一样。

<div id="img_graphics2" class="center">
    <img id="graphics2" src="../images/graphics2.jpg" alt="graphics2"/>
    <p class="imgtxt">Above: Is a storage container</p>
</div>

img_graphics2 {
   display: block;
   float:left;
   width: 76%;
   margin-left: 12%;
   margin-right: 12%;: 
}

Answer 1

只需要将css属性“page-break-inside：avoid”添加到包含div

<div id="img_graphics2" class="imgtxtdiv">
  <img id="graphics2" src="../images/graphics2.jpg" alt="graphics2"/>
  <p class="imgtxt">Above: Is a storage container</p>
</div>

img_graphics2 {
   display: block;
   float:left;
   width: 76%;
   margin-left: 12%;
   margin-right: 12%;: 
}
.imgtxtdiv {
    page-break-inside:avoid
}