HTML CSSの複数の列レイアウトに画像を配置する方法は？

Question

HTMLページの複数の列レイアウトCSSにイメージを配置するにはどうすればよいですか？

記事タグの内容を含むhtmlページを作成しました。列数が5のCSSを作成しました。第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の幅を縮小します。これはあなたのために働くことを望みます。