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>

clipboard.png

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.

  1. if you use float , you don't need to use inline-block .
  2. 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?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4e1d1-44f99.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4e1d1-44f99.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?