css - 如何使用内嵌图片实现多栏布局

Question

我正在尝试使用内联图像实现多列布局。

如下图所示:

===========   ============   ============   ============   ============   + + + + + +
===========   ============   ============   ============   ============   +         +
===========   ============   ============   ============   ============   + Image-3 +
===========   ============   ============   ============   ============   +         +
+ + + + + + + + + + + +  +   ============   + + + + + +    ============   +         +
+                        +   ============   +         +    ============   +         +
+        Image-1         +   ============   + Image-2 +    ============   + + + + + +
+ Spanned across columns +   ============   +         +    Empty space    ============
+                        +   ============   +         +     as Image-3    ============
+                        +   ============   +         +     cannot fit    ============
+ + + + + + + + + + + +  +   ============   + + + + + +        here       ============

我必须在基于 JavaScript/HTML 的 Windows 8 应用程序中使用它(因此您可以假设它仅适用于 IE 10)。

我尝试使用以下 CSS，但它没有按预期布置图像。

column-fill: auto;
column-gap: 30px;
column-width: 270px;

知道我该怎么做吗？

Answer 1

您是否看过 -ms-grid-* 属性？API 文档:http://msdn.microsoft.com/en-us/library/windows/apps/hh453256.aspx一个例子:http://msdn.microsoft.com/en-us/library/windows/apps/hh972605.aspx