javascript - CSS Float 和 AngularJS

Question

我正在尝试使用具有排序属性的 JSON 对象来控制页面上 div 的排序顺序:

var json = {
modules: [{
    css: 'small',
    header: 'MES',
    sort: '2',
    elements: [{
        header: 'All'
    }, {
        header: "Retail"
    }, {
        header: 'Previous'
    }]
}, {
    css: 'small',
    header: 'QFS',
    sort: '1',
    elements: [{
        header: 'All'
    }, {
        header: "Retail"
    }, {
        header: 'Previous'
    }]
}, {
    css: 'small',
    header: 'QComm',
    sort: '3',
    elements: [{
        header: 'Current'
    }, {
        header: 'Previous'
    }]
}]
};

它工作正常并且显示效果很好。但是，如果我从这里更改排序，我的第三个 block 将显示在第二个 block 的右侧下方，而不是左侧第一个 block 的下方。

Fiddle

Answer 1

float 有点棘手。如果 1) 第一个盒子有 height: 200px 和2) 第二个有 100px 和 3) 第三个 100px ..

你会看到左边只有一个框 1) ...右边是 2) 和 3)

修复它的一种方法是确保所有盒子的高度相同，例如最小高度:150px;

.small {
    width:50%;
    background-color:green;
    float:left;
    text-align:center;
    min-height: 150px;  /* here we go */
}

但是一旦其中一个盒子的内容会延伸到那个高度，这就不可能了......