javascript - 如何在 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)

Answer 1

这是一个经过清理的解决方案，应该适用于所有主流浏览器。它依靠绝对定位的图像而不是使用 column-span，因为 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 尚不支持)。作为引用，我添加了这个解决方案作为这个问题的单独答案。