如何在HTML CSS中的多列布局中放置图像？

Question

如何将图像放置在HTML页面中的多列布局CSS中？

在文章标签中创建了包含内容的html页面。创建css列数为5.我正在尝试将图像放置在跨越第3和第4列的第2列。

HTML布局应该是

texttexttext ****************************************** texttexttext 

texttexttext ****************************************** texttexttext 

texttexttext ************SINGLE IMAGE************ texttexttext 

texttexttext ****************************************** texttexttext 

texttexttext texttexttext texttexttext texttexttext texttexttext 

texttexttext texttexttext texttexttext texttexttext texttexttext 

我的HTML代码和CSS代码低于

HTML代码（只是商品标签） 的index.html

<article> 
<img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" /> 
<p> Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum 
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
<p>Nam liber tempor cum soluta. nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
Ut wisi enim ad minim veniam.</p> 
<p>Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
te feugait nulla facilisi.</p> 
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim 
ad minim veniam.</p> 
<p>Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
te feugait nulla facilisi.</p> 
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.</p> 
</article> 

我的CSS代码 Samp.css

article { 
    max-width: 860px; 
    column-count: 5; 
column-gap: 20px; 
height: auto; 
} 
article img { 
    position: absolute; 
    display: block; 
column-span: all; 
    height: 200px; 
    width: 500px; 
    margin-bottom: 25px; 
    left: 200px; 
    z-index:-1; 
    overflow: auto; 


} 
article p { 
    margin-bottom: 1.3em; 
} 
article p:first-of-type { 
    position: static; 
    float: left; 
    z-index: -1; 
    overflow: auto; 
} 

Answer 1

article { 
      max-width: 860px; 
      column-count: 5; 
      column-gap: 20px; 
      height: auto; 
     } 
     article img { 
      position: absolute; 
      display: block; 
      column-span: 2; 
      height: 200px; 
      width: 330px; 
      margin-bottom: 25px; 
      left: 100px; 
      right: 150px; 
      z-index:-1; 
      overflow: auto; 


     } 
     article p { 
      margin-bottom: 1.3em; 
     } 
     article p:first-of-type { 
      position: static; 
      float: left; 
      z-index: -1; 
      overflow: auto; 
     } 

以上是更新后的CSS文件。 在CSS文章img中添加一个正确的属性，并减小img的宽度。希望这对你有用。