用于投资组合的响应式 4 列图像网格答案

【问题标题】：Responsive 4 column image grid for portfolio用于投资组合的响应式 4 列图像网格
【发布时间】：2015-08-19 07:01:06
【问题描述】：

我想只使用 html、css 和 js 来制作作品集。列数应该是 4，并且在调整大小时应该是响应式的。我发现这段代码很完美，但问题是它包含超过 4 列-http://codepen.io/bradfrost/pen/xkcBn。

有没有办法让它变成只有 4 列..谢谢

这是 CSS

.g {
        padding: 0.25em;
            overflow: hidden;
        }
        .g li {
            float: left;
            width: 50%;
            padding: 0.25em;
        }
        .g img {
            display: block;
        }
        .g li:nth-child(odd) {
            clear: left;
        }

        @media screen and (min-width: 40em) {
            .g li {
                width: 33.3333333333333333%; 
            }
            .g li:nth-child(3n+1) {
                clear: left;
            }
            .g li:nth-child(odd) {
                clear: none;
            }
        }
        @media screen and (min-width: 55em) {
            .g li {
                width: 25%; 
            }
            .g li:nth-child(4n+1) {
                clear: left;
            }
            .g li:nth-child(3n+1) {
                clear: none;
            }
        }
        @media screen and (min-width: 72em) {
            .g li {
                width: 20%; 
            }
            .g li:nth-child(5n+1) {
                clear: left;
            }
            .g li:nth-child(4n+1) {
                clear: none;
            }
        }
        @media screen and (min-width: 90em) {
            .g li {
                width: 16.666666666%; 
            }
            .g li:nth-child(6n+1) {
                clear: left;
            }
            .g li:nth-child(5n+1) {
                clear: none;
            }
        }

【问题讨论】：

随着屏幕变大，会添加更多列。
使用 Foundation 或 Twitter Bootstrap...已经有很多模板可用了！！！
这是来自 Foundation 的示例之一 > foundation.zurb.com/templates/workspace.html
这是你要找的吗？？？
谢谢..我使用了引导模板。但我希望找到一个只有 css 和 html 的解决方案

标签： html css responsive-design

【解决方案1】：

这是我对你懒惰的懒惰回答。 http://jsfiddle.net/z38g0Le5/

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<style>
    .box {width:25%; display:inline-block;}
</style>

真的有这么多资源...

【讨论】：