Question

我提供了关于如何对齐我的div的建议，这很好但是现在我有一个问题，div在屏幕尺寸上堆叠，因为他们应该但我需要给他们保证金，但无论我给他们多少保证金改变什么？

HTML：

  <div class="categorylist">
      <div class="categorypost">1</div>
      <div class="categorypost">2</div>
      <div class="categorypost">3</div>
      <div class="categorypost">4</div>
      <div class="categorypost">5</div>
      <div class="categorypost">6</div>
   </div>

CSS：

.categorylist{
    background-color: #FFF;
    height: auto;
    padding: 0px;   
    text-align: center;
    margin: 0 auto;
}


.categorypost{
    height: 200px;
    background-color:red;
    margin-bottom: 20px;
    width: 300px;
    display:inline-block;
    margin:0 auto;
}

Answer 1

删除你的最后一行：

margin:0 auto;

您正在用margin-bottom覆盖它：

.categorypost{
    margin-bottom: 20px;
    margin:0 auto;        /* Culprit */
}

Answer 2

在overflow: hidden上设置.categorypost，以强制浏览器再次计算元素并检测边距。

http://codepen.io/AndreiPham/pen/vhkas/

Answer 3

在.categorypost上，您使用margin: 0 auto;设置了margin-bottom两次并覆盖了第一个：

.categorypost {
    margin-bottom: 20px;
    margin: 0 auto;
}

更改为：

.categorypost {
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

简写：

.categorypost {
    margin: 0 auto 20px;
}

Answer 4

如果我理解正确，那么这里作为一个例子

HTML

<div class="categorylist">


        <div class="categorypost">1</div>

        <div class="categorypost">2</div>

        <div class="categorypost">3</div>

        <div class="categorypost">4</div>

        <div class="categorypost">5</div>

        <div class="categorypost">6</div>


    </div>

css

* {
    margin: 0;
    padding: 0;
}
.categorylist{
    background-color: #ddd;
    height: auto;
    padding: 0px;   
    text-align: center;
    margin: 0 auto;
    width: 960px;
}


.categorypost {
    height: 200px;
    background-color:red;
    width: 300px;
    display: block;
    margin: 0 auto 20px;
}

DEMO

Answer 5

我还没有理解你的所有问题，但我想你希望你的div不会崩溃。

首先，您margin: 0 auto块上不需要.categorypost，因为您的布局在margin: 0 auto;块上以.categorylist为中心。

请参阅此网站以了解保证金属性的工作原理：http://www.w3schools.com/css/css_margin.asp

现在，如果您想在.categorypost块之间垂直添加空格，可以像{C}}一样使用margin，但第二个margin: 0 auto会覆盖margin-bottom: 20px margin-bottom: 20px; 。

例如，margin-top: 10px; margin-bottom: 10px;或{{1}}如果您想在顶部和底部添加边距以使其更漂亮。

在此处观看此活动：http://jsfiddle.net/9etcQ/

给内联块divs保证金

5 个答案: