如何在CSS3站点布局中跨多个列跨越图像？

Question

给定一个简单的连续文本段的基本四列布局,以及只有一个图像跨越三列,右上对齐,我们如何在最后三列上跨越我们的图像,以便我们的文本自动围绕图像流动？

.quatroColumns{}             /* css multi column 4 columns */
.imageSpanning2Columns{}     /* align to top-right */
.imageSpanning3Columns{}     /* align to top-right */
.imageDescription{}          /* description box over image */

http://jsfiddle.net/Vbr9d/205/ (很难找到图片应该去的地方:不简单而不优雅的开始!)
http://jsfiddle.net/Vbr9d/206/ (看起来很难看,但HTML启动优雅地分离图像和文字pragraph!)

---

*忘记旧的浏览器版本,除了当前主流版本:Firefox,Internet Explorer,Chrome,Safari.欢迎任何想法,方向或实验.用于将段落文本自动拆分为不同div的替代JavaScript实现也是受欢迎的.

Answer 1

这是一个清理的解决方案,应该适用于所有主流浏览器.它继承了绝对定位的图像,而不是使用列跨度,因为Firefox尚不支持它.

/* Just to make it look a little nicer */
body {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  padding: 1em;
}


article {
  /* We're giving our article a max-width. This isn't needed if a parent already does this.*/
  max-width: 860px;
  
  /* Create a 4 column layout */
  -webkit-column-count: 4;
     -moz-column-count: 4;
     column-count: 4;

  /* Give each column a little added spacing */
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
     column-gap: 20px;
     
  /* To be able to absolute position the image we need to give the parent a position */
  position: relative;
  
  /* This pulls up the first column of text to align with the image */
  padding-top: 225px;
}

article img {
  /* Absolute position our image */
  position: absolute;

  /* Place it in the top right cornet */
  top: 0;
  right: 0;

  /* Give it a height of 200px, this can of course be change if needed. If you update the height here make sure you also change the padding-top of the article and the negative margin later down. */
  height: 200px;
  
  /* We only want the image to spread 3 columns in width, that's 75% of the entire width. We also use 10px (half of the column-gap). */
  width: calc(75% - 10px);

}

/* Give the first paragraph a negative margin to pull it back up. (right now we're only using one parapgrah but if you'd want more in the future lets be specific here) */
article p:first-of-type {
  margin-top: -225px;
}

/* Some media queries to make it look nice on all resolutions */
@media screen and (max-width: 800px) {
  article {
    padding-top: 0;
    -webkit-column-count: 2;
       -moz-column-count: 2;
       column-count: 2;
  }
  article p:first-of-type {
    margin-top: 0;
  }
  article img {
    position: static;
    margin: 0 0 30px;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 600px) {
  article {
    -webkit-column-count: 1;
       -moz-column-count: 1;
       column-count: 1;
  }
}

<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.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.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.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.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.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.</p>
</article>

对于scss版本,请查看此codepen

这个答案最初包含使用column-span的解决方案(遗憾的是Firefox尚未支持).作为参考,我已将此解决方案添加为此问题的单独答案.