html - 如果元素受到影响，EPUB分页符将元素一起移动到新页面

在编写一个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%;:
}

最佳答案

只需要将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
}