logo标签列表

Div元素无法使用整个空间

javascriptjqueryhtmlcss
3

我希望能够放置12张卡片（2行 -> 每行6张卡片）。我的代码需要响应式，所以我使用了宽度/高度%。问题是有很多空白/空间，而且卡片很小。这里是我使用的代码：

JSFIDDLE：http://jsfiddle.net/A2bU7/

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>
如果有多个相同名称的“id”，则不应该使用。如果需要命名相同的内容，请使用“class”... - Dryden Long
我会尽快将ID更改为类 @DrydenLong。 - user2496520
你想要更大的卡片还是只是均匀地间隔？如果想让卡片变大，只需增加填充即可。 - MilkyTech
@ChrisM 是的，卡片的大小必须根据div宽度计算。因此，卡片的宽度必须是总div宽度的10%。 - user2496520
你可以在这个fiddle中看到，沿途的某些东西需要有一个固定的高度。 - MilkyTech
显示剩余3条评论
2个回答
1
Margin会拉伸div的外部，这就是为什么你会得到空白/空隙，而padding则会在内部拉伸。因此，您应该调整卡片的margin/padding并选择自己喜欢的样式。
#board > div {
  margin: 5px;
  padding: 25px 20px;
}

fiddle 改变边距/填充。

fiddle 百分比宽度/高度。

你的代码可以运行，但是卡片的宽度和高度太小了，无法填满整个 div。我修改了你的代码，宽度已经覆盖了，但是高度仍然保持不变（更小）。 - user2496520
你的卡片没有 width/height 。 你通过保持 margin/padding 来给它们一个形状。请阅读 http://www.w3schools.com/css/css_padding.asp。我认为改变卡片的 padding 的 top-right-bottom-left 属性将提供您想要的形状。 - Md Nazmoon Noor
我可以在卡片div中使用固定百分比的高度/宽度来获得形状吗？ - user2496520
当然可以。但是你需要进行一些调整，比如给父元素#board设置一个固定的高度。http://jsfiddle.net/nazmoonnoor/A2bU7/7/ - Md Nazmoon Noor
0

减少你的边距，也许增加你的填充。

我试了一下，它只对宽度有效，对高度无效...宽度没问题，但高度太小了... - user2496520
你打算在div里放什么东西吗？那会给你高度。 - S. Ahn
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接