div的CSS样式

Question

我遇到了来自数据库的自动生成div的问题，我正在尝试显示存储在我的数据库中的新闻，我设置宽度以便每行有2个新闻，并根据内容提供不同的高度。但现在我有一个很大的空白区域，在同一垂直行中有两条新闻。我该如何解决这个问题。

以下是显示我的问题的图片：

以下是我对每个新内容的html代码：

<?php

      while($row = mysqli_fetch_array($resultNoticias)){
        echo '<div class="noticia">';     
        echo '<h4>Noticias/' . $row["Fecha"] . '</h4>';
        echo '<a href="new.php?id='.$row["idNoticias"] . '"><h3>' . utf8_encode($row["Titulo"]) . '</h3></a>';
        echo '<p>'. utf8_encode($row["Descripcion"]) . '</p>';
         echo '<a href="new.php?id='.$row["idNoticias"]. '"> <img style="height:100%;width:100%;" src=images/' .  $row["Imagen1"] . '></a><br>';
       echo '<br><br>';
        echo '</div>';
      }
    ?>

这是css：

.noticia{
    width: 48%;
    position: relative;
    float: left;
    display: inline-block;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    padding-top: 10px;
    word-wrap: break-word;
    font-size: 1.5em;
    background-color:white;
    border:2px solid black;
    margin-left:1%;
    background-color: #DADADA;
}

Answer 1

请在你的CSS中添加最小高度。

.noticia{
    width: 48%;
    min-height:300px;
    position: relative;
    float: left;
    display: inline-block;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    padding-top: 10px;
    word-wrap: break-word;
    font-size: 1.5em;
    background-color:white;
    border:2px solid black;
    margin-left:1%;
    background-color: #DADADA;
}