Tengo un div
en donde presento otros div
a manera de botones, cuando los botones superan el alto del div
que los contiene, quedan apilados en la parte de arriba pero cuanto son pocos, se crean espacios entre las filas distribuyendolos dentro del div que los contiene
, lo que deseo es, que siempre queden aplilados en el
top
del div que los contiene
tengo el siguiente codigo,
Div
que contiene la lista de botones
<div id="divButtonList" class="row">
</div>
Codigo php
que genera la lista de botones
$sql = "SELECT * FROM products WHERE prd_Activo=true AND prd_group=" . $prd_group . " ORDER BY prd_name";
$stmt = $conn->prepare($sql);
$stmt->execute();
$rows = $stmt->rowCount();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$product = '
<div class="col-sm-3">
<a href="javascript:void(0)" class="addPct" id="product-' . $row['prd_id'] . '" onclick="addItemOrder(' . $row['prd_id'] . ')">
<div class="card alert bg-light">
<div>
<div>
<div class="product_name">
<h6>' . utf8_decode(ucwords(strtolower($row["prd_name"]))) . '<br><span style="font-size: xx-small; color:red;">' . strtoupper($row['prd_brand']) . '</span></h6>
</div>
<div class="product_des">
<h6>' . $co_money . number_format($row['prd_pricesell1'], 2) . '<span style="font-size: xx-small;"> X ' . $row['prd_UnidadEmpaque'] . '</span>' . $iconFav . '</h6>
</div>
</div>
</div>
</div>
</a>
</div>
';
echo $product;
}
Y con jquery lleno el div divButtonList
$('#divButtonList').load('PosProductButtons.php?prd_group=' + id_group);