CSS样式的div

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; 
}