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

【问题标题】：How to achieve multi column layout with inline images如何使用内联图像实现多列布局
【发布时间】：2012-09-16 06:03:49
【问题描述】：

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

如下图所示：

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

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

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

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

知道我该怎么做吗？

【问题讨论】：

您是在使用任何网格系统还是在构建自己的网格系统？

标签： css microsoft-metro

【解决方案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

【讨论】：

这无济于事，因为列数取决于内容。它应该是流动的。其次，图像的定位和跨越也取决于内容，所以在这种情况下我不能使用 ms-grid。

【解决方案2】：

<!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>

【讨论】：

【解决方案3】：

我建议查看 Internet Explorer 10 支持的 CSS multi-column layout。

【讨论】：

CSS 多列布局将不起作用，因为我们无法为 CSS column-span 属性指定要跨越的确切列数
你不需要指定它——你只需要在你有多个特定的列时才需要使用它。如果您有动态内容，它会根据需要继续添加列。
我说的是跨越 2 列的图像。无法指定特定图像应跨越 2 列。它要么跨越所有列，要么不跨越。