Question

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

如下图所示：

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

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

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

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

知道我该怎么办？

Answer 1

你看过-ms-grid- *属性了吗？ api doc：http://msdn.microsoft.com/en-us/library/windows/apps/hh453256.aspx 例如：http://msdn.microsoft.com/en-us/library/windows/apps/hh972605.aspx

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

Answer 3

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

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

3 个答案: