1

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

如下图所示：

===========   ============   ============   ============   ============   + + + + + +
===========   ============   ============   ============   ============   +         +
===========   ============   ============   ============   ============   + 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;

知道我该怎么做吗？

4

3 回答 3

0

你看过 -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

于 2012-09-16T08:52:05.823 回答
0 
<!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>
于 2012-09-16T16:39:27.027 回答
-1

我建议查看Internet Explorer 10 支持的CSS 多列布局。

于 2012-09-16T22:46:01.837 回答