Question

我想仅使用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;
            }
        }

Answer 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>

认真地说有那么多资源......

投资组合的响应式4列图像网格

1 个答案: