Question

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

.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。

Answer 1

@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/

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

1 个答案: