Question

我正在尝试构建一个带有图像网格的页面（所有300px乘300px）。调整大小时：图像大小不会改变，但每行的额外图像会下降到下面的行。

我现在在JSFiddle上有什么： https://jsfiddle.net/xixi/w4xx9y33/

它工作得很好，但我真的想让网格始终居中，而不是左对齐。就像Pinterest.com上的引脚网格一样

提前感谢您的帮助！

<body>
  <div class="grid">
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
  </div>
</body>

Answer 1

可能使用flexbox技术来实现您的目标。

检查以下参考页

http://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/

https://css-tricks.com/seamless-responsive-photo-grid/

Answer 2

试试这个：

.grid_item {
    @include rowMachine(1, 10%);
    display: inline-block;
    background: none;
    padding: 10px;
    position: relative;

    @media (min-width: 500px) {
        @include rowMachine(2, 5%);
        float: left;
    }
...

保持原样。

注意：如果您需要IE7支持，则可能会遇到块上的内联块问题。

如何集中响应网格

2 个答案: