保持网格内div的纵横比[重复]

Posted 2023-03-06

【中文标题】保持网格内div的纵横比[重复]

【英文标题】：Keep aspect ratio of divs inside a grid [duplicate]

【发布时间】：2014-07-15 06:11:58

【问题描述】：

我正在创建记忆游戏。我在 6:4 方面使用了 24 张卡，即。 4 行，每行六张牌。

这是我想要实现的图像以及我的屏幕分辨率：

这是图片在不同分辨率下会发生什么

这是我正在使用的 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;

【问题讨论】：

这是因为浮动。当您浮动元素时，它将它们向左（或向右）推到合适的位置，然后在不合适时将它们移动到新行。您必须将父容器保持在固定宽度，足以在一行中包含 6 张卡片。

为小框（div）提供适当的左边距

尝试使用相对宽度，尽管每次更改每行的单元格数时都必须重新计算它。但是，如果使用脚本，则会自动为您完成。

就像 Kyle Said 一样，只需有一个父容器，每六个盒子作为一行..

【参考方案1】：

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

流体宽度/高度 可变边距 固定纵横比

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;

【讨论】：

似乎比我的回答更正确，因为纵横比确实保持不变-

@NicoO thx 但我怀疑它是否是 OP 需要的正确的我无法描述是否必须为容器或卡片保持纵横比...

我想保持卡片的纵横比是必要的，我错了；）

感谢@web-tiki 的帮助。您的代码正在运行。谢谢

【参考方案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>

【讨论】：

欢迎您，很高兴您找到了适合您的解决方案

【参考方案3】：

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

#board > div > div

在每六个 DIV 之后放置 br 元素可能也可以。

【参考方案4】：

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

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

请注意，如果#board 变得太小，这并不能阻止卡片环绕。只是想把它作为附加项扔掉，以防您想保持卡片的 CSS 原样。

【讨论】：

另外，我在#board CSS 中添加了overflow: hidden;，以使其正确包裹浮动元素。