CSS3 多列将图像分成几个部分答案

【问题标题】：CSS3 multi-column breaks images into several partsCSS3 多列将图像分成几个部分
【发布时间】：2017-08-28 00:38:29
【问题描述】：

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

这是我的多列样式：

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

我已尝试实现以下样式：

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

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

【问题讨论】：

你能添加一个jsfiddle.net 演示样本吗？你的图片有多大？

标签： html css epub css-multicolumn-layout

【解决方案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';
   }

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：