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';
   }

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

Answer 2

如果图像高于480px，它会将图像分割到下一列，列的高度必须大于图像的高度

Answer 3

img
{
max-width: 320px;
max-height: 480px;
height: auto;
};