CSS3多列将图像分为几个部分

我正在iOS平台中实现epub阅读器。我使用CSS多列布局为HTML文件分页。它在纯文本HTML文件上工作正常，但是当加载图像时，图像将被分成几页。CSS3多列将图像分为几个部分

这是我的风格多列：

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

我试图实现以下样式：

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

但它不工作。我怎样才能避免图像分离？

来源

2011-08-21 Oscar

你可以添加一个http://jsfiddle.net/演示示例吗？你的图像有多大？ – easwee

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

来源

2012-01-19 10:17:38

如果图像比480像素高，这将打破图像到下一列，列的高度必须大于图像

来源

2012-01-06 14:07:19 roroland

的高度较大，以动态地做到这一点，即你的时候阅读不知道其内容的epub，将每个图像封装在div中，然后在该div中添加“page-break-inside：avoid”属性。由于某种原因，将该属性严格追加到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-29 20:51:30

CSS3多列将图像分为几个部分

回答

相关问题