Question

我正在尝试创建一个会有一些Div响应的页面。

我创建了div并且它们有点响应但是我无法获得正确的边距！

基本上，我需要在div之间放一些空格，这样它们就不会粘在一起。

This就是我所做的，这就是CSS：

.holder {
    width : 45%;
    height : auto;
    border : 1px solid red;
    display : inline-table;
    float : left;
}

@media (max-width: 600px) 
{
 #container {
     width : 100%;
  }
 .holder {
     width : 100%;
  }
}

我可以简单地放.holder {margin:4%; */OR ANY OTHER VALUES HERE*/}但这意味着第一个div会被推离原来的地方，这不是我想要的。

有人可以就此问题提出建议吗？

提前致谢。

Answer 1

如何仅在右侧添加保证金？

类似于.holder { margin-right: 4%; margin-bottom:4% }。

Answer 2

在margin-right:4%; margin-bottom:4%;中使用.holder，在媒体查询中使用margin-right:0

希望这能解决您的问题

<强> updated jsFiddle

Answer 3

尝试替换此类..

.holder {
    width : 45%;
    height : auto;
    border : 1px solid red;
    display : inline-table;
    float : left;
    margin:0% 3% 2% 0%; /* margin for the div*/
}

这是FIDDLE

Answer 4

你可以设置

margin-bottom:4%;
margin-right:4%;

在div之间添加一些空格

Answer 5

使用nth-child(2n+1)

添加了右边距

Fiddle

CSS：具有保证金和调整的响应部门？

5 个答案: