带图像的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.

评论
  • wodio
    wodio 回复

    How about using display: grid for the body? Just make sure to wrap all the paragraphs inside a div.

    body {
      display: grid;
      grid-template-columns: 33% 33% 33%;
    }