0

我有一组相同大小的图像。
我想将它们显示为类似表格的结构，但要更改“列”的数量，具体取决于用户浏览器的窗口宽度，所有结构都居中。
我想出的是：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 。

4

1 回答 1

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;
    } 
}

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

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

于 2013-02-22T07:38:08.937 回答