保持网格内div的宽高比

Question

我正在创造记忆游戏。我在6：4的方面使用24张卡，即。 4行，每行有6张卡片。

以下是我想要实现的内容以及我在屏幕分辨率上的内容：

这是图片在不同分辨率上发生的事情

这是我正在使用的css代码：

#board{
padding: 5px;
background-color:#cccccc;
width:70%;

#board > div {
        background-color: grey;
        border:#000 1px solid;
        width:71px;
        height:81px;
        float:left;
        margin:20px;
        padding:10px;
        font-size:64px;
        cursor:pointer;
        box-shadow: 0px 5px 14px grey;
        border-radius: 5px;
        transition: 0.2s;
    }

#board > div:hover {
    box-shadow: 0px 0px 25px black;
    transition-timing-function: all ease-in-out;

}

Answer 1

这是一个 4 * 6块的响应式网格和

1. 流体宽度/高度
2. 流动利润
3. 固定宽高比

<强> DEMO

HTML：

<div>
    <div class="card"></div>
    <div class="card"></div>
    ...
</div>

CSS：

.card{
    width: 16%;
    padding-bottom:24%;
    margin:0.3%;
    border:1px solid #000;
    background:grey;
    float:left;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    border-radius:10px;
}

Answer 2

如果你知道要显示最大值的牌数，你可以用css计算所需的值和高度。以下是6x4卡的一个示例。

http://jsfiddle.net/2R4Qk/2/

CSS：

/* add border + padding to width */
*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
    padding:0;
    margin:0;
}

.deck
{
    height: inherit;
    margin:0;
}

/* change the 6 to desired column/row count */
.deck .card
{
    width: calc(100% / 6 - 10px);
    height: calc(100% / 4 - 10px);
    margin: 5px;
    background-color: silver;
    border-radius: 4px;
    border: 1px solid gray;
    float: left;
}

HTML：

<div class="deck">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>

    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>

    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>

    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>

</div>

Answer 3

有多种方法可以做到这一点。我建议在外部div中包装每个六个DIV。 但是，您需要将CSS选择器更改为以下内容：

#board > div > div

每六个DIV之后放置br元素也可能会起作用。

Answer 4

作为将每一排卡片放入容器内的替代方法，我想提一下，在每个第6个卡片元素之后，您还可以clear使用相当简单的CSS。

#board > div:nth-child(6n+1) {
    clear: both;
}

请注意，如果#board变得太小，这并不能防止卡片被包裹。只是想把它扔出去作为一个补充，以防你想要保持卡的CSS。