Question

我想放置12张卡（2行 - > 6张卡在一行中）。我的代码需要响应，所以我使用宽度/高度％。问题是有很多空白/空白空间，卡片很小。这是我使用的代码：

CSS：

    #pagewrap
{
display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
//padding: 5px;
background-color:#cccccc;
width:100%;
   height:70%;
}
#board > div {
        background-color: grey;
        border:#000 1px solid;

        width:10%;
        height:20%;
        float:left;
        margin:15px;
        padding:15px;
        font-size:64px;
        cursor:pointer;
        box-shadow: 0px 5px 14px grey;
        border-radius: 5px;
        transition: 0.2s;

    }
#board > div:nth-child(6n+1) {
    clear: both;
}
#board > div:hover {
    box-shadow: 0px 0px 25px black;
    transition-timing-function: all ease-in-out;

}

HTML：

<html>
<div id="pagewrap">
<div id="board">
<div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
</div>
<div>
</html>

Answer 1

边距延伸到div的外部，这就是为什么你得到空白/空白空间和内部的填充拉伸。因此，您应该调整/调出卡片的边距/填充，然后选择您喜欢的内容。

#board > div {
  margin: 5px;
  padding: 25px 20px;
}

带有保证金/填充更改的

fiddle。 fiddle具有百分位宽度/高度。

Answer 2

降低边距并增加填充量。

Div元素不会占用整个空间

2 个答案: