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 
<!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 に答える
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 に答える
-1

Internet Explorer 10 でサポートされているCSS 複数列レイアウトを参照することをお勧めします。

于 2012-09-16T22:46:01.837 に答える