html - CSS3多列将图像分成几个部分

Question

我正在 iOS 平台上实现一个 epub 阅读器。我使用 CSS 多列布局对 HTML 文件进行了分页。它在纯文本 HTML 文件上运行良好，但在加载图像时，图像将被分成几页。

这是我的多列样式:

body {
    -webkit-column-width:320px;
    -webkit-column-gap:22px;
    height:480px;
}

我尝试实现了以下样式:

img{
    -webkit-column-break-inside: avoid;
}

但它不起作用。如何避免图像分离？

Answer 1

要动态执行此操作，即当您阅读不知道其内容的 epub 时，将每个图像包装在一个 div 中，然后将“page-break-inside: avoid”属性附加到该 div 即可。出于某种原因，将该属性严格附加到 android 3.1 的 WebView 中的图像对我不起作用，这是我的解决方法。

示例(没有 jQuery):

   var images = document.getElementsByTagName('img');
   var imgLength = images.length;
   for(var i = 0; i < imgLength; i++)
   {
       images[i].innerHTML = '<div>'+images[i]+'</div>';
       images[i].pageBreakInside = 'avoid';
   }

更新到旧帖子，但希望这能帮助那些仍然有类似问题的人。