Float：left-Float：right當div過高時發出。 （有解決方案，但不知道如何將其實現到MYSQL中）

Question

所以我目前正在從數據庫中的表中提取行：

$result_article = $mysqli->query("SELECT * FROM article ORDER BY article_id DESC") or trigger_error($mysqli->error."[$sql]");;
    while($row_article = $result_article->fetch_array(MYSQLI_ASSOC)) {
        echo    '<div class="featured-news">
                    <div class="featured-news-header">
                        <p>'.date("d/m/Y", strtotime($row_article['article_date'])).'</p>
                        <h3>'.$row_article['article_title'].'</h3>
                    </div>
                    <div class="featured-news-content">
                        <p>'.nl2br($row_article['article_content']).'</p>
                    </div>
                    <div class="featured-news-footer">
                        <a href="index.php?page=nyheder-edit&id='.$row_article['article_id'].'"><img height="30px" src="img/action_buttons/nyheder.png"></a>
                        <a onclick="return confirm(\'Er du sikker på at du vil slette dette produkt?\');" href="index.php?page=nyheder-delete&id='.$row_article['article_id'].'"><img height="30px" src="img/action_buttons/delete.png"></a>
                        <div class="clear-fix"></div>
                    </div>
                </div>';
    }
?>

這是我的風格：

.featured-news {
background-color:white;
margin-top:2%;
margin-left:2%;
border-radius:6px;
overflow:hidden;
width:49%;
float:right;
transition:all 0.2s ease-in-out;
}
.featured-news:hover {
transform:scale(1.01,1.01);
box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.15);
}
.featured-news:nth-of-type(1), .featured-news:nth-of-type(3n+3) {
margin-left:0;
float:left;
width:49%;
}

好的，這就是我的div高度相同時的樣子：

正是我想要的...盡管如此。 http://i.imgur.com/gi3gTsB.png

當我拖出瀏覽器時（由於內容變化，高度發生了變化： http : //i.imgur.com/lIPQQzZ.png

我自己可以輕松解決此問題，如果我不提取這些div，也不能扭曲我的頭腦以使其正常工作，請提供幫助。

Answer 1

我使用Masonry.js對其進行了修復，這確實很有幫助http://masonry.desandro.com/