1

小提琴 | 全屏

编辑：更新小提琴 | 全屏

在上面的代码中，我成功地制作了一个3x39div秒的网格（通过 8 克隆jQuery）。网格水平居中但不是垂直居中。垂直居中是否有任何不太复杂的方法（首选CSS解决方案）。

另外，我必须!important在 CSS 中使用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); }
4

1 回答 1

0

class frame 有一个 display:inline-block 的BUG，可以用float:left代替。

于 2013-06-14T14:52:57.527 回答