2

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

这是我的多列样式：

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

我试图实现以下样式：

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

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

4

3 回答 3

1

要动态地执行此操作，即当您阅读不知道其内容的 epub 时，将每个图像包装在 div 中，然后将“page-break-inside：避免”属性附加到该 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';
   }

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

于 2013-04-29T20:51:30.260 回答
0

如果图片高于480px，则会将图片分到下一列，该列的高度必须大于图片的高度

于 2012-01-06T14:07:19.663 回答
0 
img
{
max-width: 320px;
max-height: 480px;
height: auto;
};
于 2012-01-19T10:17:38.663 回答