向上浮動的行

我正在使用Angular創建一個複選框列表，用於定義某些數據是否可見。向上浮動的行

$scope.data = [ 
    {name: "Data1", shown: true}, 
    {name: "Data2", shown: true}, 
    {name: "Data3", shown: true}, 
    {name: "Data4", shown: true}, 
    {name: "Data5", shown: true}, 
    {name: "Data6", shown: true} 
    ];

該數據被顯示在一個頂欄，其具有有限的高度，因而不能夠以適合數據的整個陣列。

<div class="contentBar"> 
    <div class="content" ng-repeat="item in data" ng-if="item.shown">{{item.name}}</div> 
</div>

我想實現的是：萬一有數據的4種以上的可見情況下，後兩個要放在另一個垂直行，該行的右側。

下面是一個小例子，介紹這種情況。

http://plnkr.co/edit/vVysWYR5FLzIBh8zP8th?p=preview

來源

2017-01-16 Pety Petyy

您可以使用CSS Flexbox的：

.contentBar { 
    display: flex; 
    flex-flow: column wrap; 
}

來源

2017-01-16 13:01:56 plvice

你需要從.contentBar DIV刪除高度，是因爲您申請的靜態高度和數據來動態。請在您的style.css中更改以下更改。

.contentBar{ 
    margin-top: 1em; 
    background-color: black; 
    width: 30em; 
} 

.content { 
    color: red !important; 
    font-weight:bold; 
}

乾杯兄弟。

來源

2017-01-16 13:01:02

這實際上回答了這個問題。 – Rob

這不是我的意思。酒吧需要有一個固定的高度，內容應包裹它。這是我的不好，因爲我不清楚。 flexbox解決方案解決了我的問題。 –

一種優雅的方式如何實現這一目標是使用柔性框。 請參閱更新的pluncker here。

的關鍵是它被添加到contentBar最後3個CSS規則：

.contentBar{ 
    margin-top: 1em; 
    background-color: black; 
    width: 30em; 
    height: 5em; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
}

很好的指導作用，以柔性盒可以在CSS tricks site找到。

來源

2017-01-16 13:03:35 Anton

向上浮動的行

回答

相關問題