<img>根据窗口的宽度放置在一行中

我有一组相同大小的图像。
我想将它们显示为类似于表格的结构，但要根据用户浏览器的窗口宽度更改“列”的数量，并且所有结构均居中。
我想出的是：http://jsfiddle.net/MHva2/3/。<img>根据窗口的宽度放置在一行中

.container { 
    display: table; 
    margin: auto; 
} 

.element { 
    width: 200px; 
    height: 200px; 
} 

<div class = "container"> 
    <img class = "element" /> 
    <img class = "element" /> 
</div>

这只有当所有的图像可以放在一个单一的行。
一旦行“中断”，container元素将全部免费，如下所示：http://jsfiddle.net/MHva2/5/。
有没有一种方法可以使其在这种情况下的内容流动？

更新：
我会尽力解释。
我想要的是浏览器将图像自动放置在一个容器中，它们应该看起来像表格单元格，列数等于floor(window_width/image_width)。
图像数量可能会有所不同，整个桌子的结构应该居中。
我画了一张图片，展示了如何使用相同数量的图像查看同一页面应该查看不同大小的窗口：http://rghost.net/44024115.view。

来源

2013-02-22 user2052437

你的问题不清楚。请详细说明 – 2013-02-22 06:24:58

@milind_developer是正确的，你的问题措辞不佳，可以肯定使用更多的细节。

从我收集你想要灵活的列数，这将扩大/缩小用户视口的大小？

要做到这一点，你可以创建一个列类，如：

.example-column { 
    float: left; 
}

然后附上你希望的任何元素的列里：

<body> 
    <div class="wrapper"> 
     <div class="container"> 
      <div class="example-column"> 
       <div class="element"></div> 
       <div class="element"></div> 
       <div class="element"></div> 
      </div> 
      <div class="example-column"> 
       <div class="element"></div> 
       <div class="element"></div> 
       <div class="element"></div> 
      </div> 
     </div> 
    </div> 
</body>

浮动风格，使流体布局的基本水平，但您也可能希望通过使用媒体查询来对列的行为施加很高的精度，例如

@media only screen and (max-width: 500px) { 
    .example-column { 
     float: none; 
    } 
}

这将强制500px以下的任何内容使用一个列布局（如果您想要更大的控件使用ID）。

小提琴：http://jsfiddle.net/MHva2/8/

来源

2013-02-22 07:38:08 danwild

<img>根据窗口的宽度放置在一行中

回答

相关问题