Question

编辑：Updated Fiddle | FullScreen

在上面的代码中，我成功设法生成了3x3个9 div的网格（通过jQuery克隆了8个）。网格水平居中但不垂直居中。是否有任何不太复杂的中心垂直方式（首选CSS解决方案）。

另外，我必须在CSS中使用!important来提供我不满意的div#game1 min-height和min-width。还有其他办法吗？

编辑：更新代码

的jQuery

(function($) {
    var $game1 = $('div#game1');
    var $game2 = $('div#game2');

    for (var i = 0; i < 8; i++) {
        $game1.append($('div.frame').eq(0).clone());
    }

    var $frame = $game1.find('div.frame');

    $(window).on('resize', function() {
        var windowW = window.innerWidth, windowH = window.innerHeight;
        var gameLen = windowW < windowH ? windowW : windowH;
        $game1.css({
            'width':  gameLen + 'px',
            'height': gameLen + 'px'
        });
    });
    $(window).trigger('resize');

})(jQuery);

HTML

    <div id="game1">
    <!-- this is one frame. Its cloned and repeated 8 more times -->
    <div data-win="-" class="frame">
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div class="winsign"></div>
    </div>
</div>

CSS

html, body {
    width: 100%; height: 100%;
    min-width: 500px;
    min-height: 500px;
    margin: 0;
    font-family: 'Open sans', sans-serif;
}

body {
    background-image: -webkit-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:    -moz-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:     -ms-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:      -o-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:         radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
}

div {
    box-sizing: border-box;
}

#game1, #game2 {
    min-width: 500px;
    min-height: 500px;
    margin: auto;
}

.frame {
    float: left;
    position: relative;
    width: 32%; height: 32%;
    margin: 0.66%;
}

.frame > .winsign {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
}

.frame .signbox {
    float:  left;
    width: 33.33%; height:  33.33%;
    border: 0px solid rgba(0, 0, 0, .5);
    overflow: hidden;
}

.frame:nth-child(1) { background: rgba(255, 0, 0, .3);   }
.frame:nth-child(2) { background: rgba(0, 255, 0, .3);   }
.frame:nth-child(3) { background: rgba(0, 0, 255, .3);   }
.frame:nth-child(4) { background: rgba(111, 111, 0, .3); }
.frame:nth-child(5) { background: rgba(0, 111, 255, .3); }
.frame:nth-child(6) { background: rgba(255, 0, 121, .3); }
.frame:nth-child(7) { background: rgba(77, 25, 255, .3); }
.frame:nth-child(8) { background: rgba(12, 12, 123, .3); }
.frame:nth-child(9) { background: rgba(255, 255, 5, .3); }

Answer 1

有一个带显示的BUG：类框架中的inline-block，你可以用float：left替换。

制作流体3x3网格显示9个div

编辑：Updated Fiddle | FullScreen

编辑：更新代码

1 个答案: