Css 如何使用内联图像实现多列布局_Css_Microsoft Metro

Css 如何使用内联图像实现多列布局

css

Css 如何使用内联图像实现多列布局,css,microsoft-metro,Css,Microsoft Metro,我正在尝试用内联图像实现多列布局如下图所示： =========== ============ ============ ============ ============ + + + + + + =========== ============ ============ ============ ============ + + =========== ============ ============ ==========

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

如下图所示：

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

我必须在基于Windows8应用程序JavaScript/HTML的应用程序中使用它（，因此您可以假设它仅适用于IE10）

我尝试使用下面的CSS，但它并没有像预期的那样布置图像

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

你知道我该怎么做吗？

你看过-ms grid-*属性了吗？ api文件：例如：


.col1{float:左；左：5%；}
.col2{float:左；左：15%；}
.col3{float:左；左：35%；}
.col4{float:左；左：55%；}
.col5{float:左；左：75%；}
.col6{float:left；left:95%；}
div{display:inline；width:150px；padding:3px；margin:6px；text align:justify；}
具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。
具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。
具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。
具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。
具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。
具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。具有内联图像的多列布局。

我建议查看internet Explorer 10支持的。

这没有帮助，因为列数取决于内容。它应该是流动的。其次图像定位和跨距也取决于内容，因此在本例中我不能使用ms grid。您是否使用任何网格系统或构建自己的网格系统？CSS多列布局将不起作用，因为我们无法为CSS列跨距属性指定要跨距的精确列数您不需要指定它--您只需要在具有要多于一个的特定列。如果您有动态内容，它会根据需要不断添加列。我说的是跨越两列的图像。无法指定特定图像应跨越两列。它将跨越所有列或不跨越任何列。

<!DOCTYPE HTML>
<html>
<head>
<style>
 .col1{ float:left; left:5%;}
  .col2{float:left; left:15%;} 
  .col3{float:left; left:35%;} 
  .col4{float:left; left:55%;}
  .col5{float:left; left:75%;} 
  .col6{float:left; left:95%;}
  div{ display:inline;width:150px; padding:3px; margin:6px; text-align:justify;}
</style>

</head>
<body>
   <div class="col1">
   multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. <img src="images/apms_buttonbgr.PNG" width="300">
   </div>

     <div class="col2">
  multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. 
   </div>

     <div class="col3">
  multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images.
   </div>

     <div class="col4">
  multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images.<img src="images/apms_buttonbgr.PNG">
   </div>

     <div class="col5">
  multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. <img src="images/apms_buttonbgr1.PNG" border="1">
   </div>

     <div class="col6">
  <img src="images/apms_buttonbgr.PNG"> multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. 
   </div>

</body>
</html>