保证金自动在浮动div中不起作用

Question

我希望卡片div在容器div的中心对齐。但是......你可以看到，并不像我想要的那样

有人可以帮助我吗？

如果遵循html代码：

<div class="container">
    <div class="card">
        <div id="cart_image"></div>
        <div id="cart_author"></div>
        <div id="cart_desc"></div>
    </div>
</div>

和这个css代码：

<style>

    .container {
        width: 100%;
        background: silver;
        max-width: 1400px;
        margin: 0 auto;
    }

    .card {
        margin: 2px;
        width: 32%;
        height: 250px;
        background: black;
        box-sizing: border-box;
        float: left;
    }
</style>

Answer 1

在“container”类中，添加以下CSS：

width: 100%; margin: 0px auto;

应该这样做。

Answer 2

您对margin使用px而width使用％，您必须使用％。

像这样更改卡片css：

.card {
  margin: 1%;
  width: 31.33%;
  height: 250px;
  background: black;
  box-sizing: border-box;
  float: left;
}

示例：https://jsfiddle.net/p14Ln2mv/