Question

我正在使用在不同分组中创建一系列卡片类型对象。在他们自己的小组中，他们需要浮动：左;

然而，当我这样做时，无论他们的分组如何，我都会让他们全部漂浮。

示例（以玉语法编写）：

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中，让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; }

Answer 2

只需将其添加到css中的.card-container：

overflow:hidden;

更多信息：CSS: DIV containing no height on float set

在容器div中浮动的Div

2 个答案: