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/