如何在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的寬度。希望這對你有用。