带图像的CSS列

由 发布于

我有一个包含图像和文本的HTML文档，并且我想使用CSS列作为三列。这是我的html：

<!--?xml version='1.0' encoding='utf-8'?-->
<!DOCTYPE html>

<html lang="zh-hant" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
body {
    column-count: 3;
}
img {
    /*display: block;*/
}
</style>
</head>
<body>
<img src="img4.png">
<img src="img4.png">

<p>paragraph</p>
<p>para<img src="img3.png">graph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p><br/></p>
</body>
</html>

You can also view from JSFiddle.

我想第一列中有第一张图片，第二列中有第二张图片。但是在Chromium中，第一和第二个图像在第一列中，其余图像在第二列中，第三列为空（在Firefox中看起来不错）。这是屏幕截图：

I know setting display: block works, but is there a method to get what I want and other images stay inline (like the third image in my example)? I want to do it in css or javascript, the html itself should not be modified.