文章/答案/技术大牛

发布

社区首页 >问答首页 >如何利用内联图像实现多列布局

问如何利用内联图像实现多列布局
EN

Stack Overflow用户

提问于 2012-09-16 06:03:49

回答 3查看 1.9K关注 0票数 1

我试图实现多列布局与内联图像。

如下图所示：

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

我必须在一个基于/的windows 8应用程序中使用它(所以您可以假设它只适用于IE10)。

我试着使用下面的CSS，但它没有像预期的那样布局图像。

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

知道我该怎么做吗？

css

microsoft-metro

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-09-16 22:46:01

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

票数 -1

Stack Overflow用户

发布于 2012-09-16 08:52:05

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

票数 0

Stack Overflow用户

发布于 2012-09-16 16:39:27

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12444760

复制

相似问题

问如何利用内联图像实现多列布局
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何利用内联图像实现多列布局EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何利用内联图像实现多列布局
EN