The problem that div will be repeated when using display inline block text.

<div class="basic_layout">

    <? while($row = mysqli_fetch_array($data)){?>

      <div class="product_layout" onclick="location.href=URLLLL";">
        <img class="product_icon opacity-black" src="<?=$row["icon"];?>">
        <div class="product_brand">OOO</div>
        <div class="product_name">XXXXXXXXXXXXXXXXXXXX</div>
        <div class="product_price">SSSSSSS</div>
      </div>
    <?}?>

  </div>

only films will be arranged by profit

.product_layout{
  width: 23%;
  height: 255px;
  margin: 15px 9px;
  display: inline-block;
  border-radius: 5px;
  border: 1px -sharpccc solid;
  cursor: pointer;
  float: left;
}

every div will have at least three lines of words
but the right side is not covered because there is no div
below and everything else is completely covered.
how to keep him uncovered?
complete div area?
I have a high 255px and still skip the text area directly.

Html5 css3 css html

Mar.24,2021

float will cause a high degree of collapse, just get rid of it.

if you use float , you don't need to use inline-block .
try adding a background color to product_layout to see if the text is out of range of the container

Brother, why does your website look like a yellow station?

clear the float, and it's easiest to add overflow:hidden

to the parent element.

Previous: Packet capture problem in YY LVB

Next: Display different values in the same data table?