html - float 在容器 div 中的 div

Question

我正在努力在屏幕上创建一系列属于不同分组的卡片类型对象。在自己的组内，需要float: left;

但是，当我这样做时，无论分组如何，我都会让它们全部 float 。

示例(jade 语法):

div(ng-init="") // my angular view div
    div(class="card-container")
        div(ng-repeat="i in instance", class="card")
            p {{i.instanceName}}
    div(class="card-container")
        div(ng-repeat="d in database", class="card")
            p {{d.databaseName}}

所以我希望有 2 个 div，在流中彼此堆叠。然后在这些 div 中，让 float 的 div 只留在它的容器 div 中。

我的css如下:

.card {
    height: 100px;
    width: 100px;
    float: left;
    position:relative;
    border-radius: 5px;
    text-align: center;
    margin: 10px;
    font-weight: bold;


    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;

     /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}



.card-container {
     width:100%;
}

非常感谢您的帮助。

Answer 1

尝试添加 .card-container { clear:both;