PHP数据回声无法正确布局

Question

我正在尝试创建一个PHP页面，该页面一次从表中显示6个数据，但是如何显示这些数据的布局存在问题，我相信此问题出现从样式

布局应该看起来像这样：屏幕截图01屏幕截图02

我尝试使用下面代码上的每个DIV元素进行播放，但是，我找不到像图像一样显示数据的正确宽度，现在我不确定在哪里出现的问题布局来自。

这就是外观：屏幕截图

php：

<div id="greenLine"></div>
<div id="content">      
    <div class="container">
        <form action="search_product.php" method="post"> <!--Action: Sent to "search_product.php" Method: The data will be displayed by "post"-->
            <label>Search Product:<br></label>
            <input type="text" name="search" placeholder="Enter Product Name"> <!--The name of the numbers inputted are "nilai"-->
            <input type="submit" id="submit" name="submit" value="Submit">
        </form>
        <?php
            $koneksi = new mysqli ("localhost","REDACTED","REDACTED","cm0491_progress_business_db_2");
            $sql = "SELECT * FROM `product_tbl` LIMIT 6";
            $querynews = $koneksi->query($sql);
            $rownews = $querynews->fetch_assoc();
            // var_dump($rownews); exit;
            do {
        ?>
        <div class="product_item">
            <div class="number_icon"><?php echo $rownews['id_product']; ?></div>
            <h2 class="product_title"><?php echo $rownews['name_product']; ?></h2> 
            <img src="images/<?php echo $rownews['gambar_product']; ?>"width="200"><br>
            <p class="product_desc"><?php echo $rownews['description_product']; ?>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
            <a href="product_detail.php">Read More</a><br><br><br>
        </div>
        <?php }while($rownews = $querynews->fetch_assoc()); ?>  
    </div>
    <!--- END CONTENT WRAPPER -->       
</div> 

CSS： #greenline {背景：url(../images/bg_top_img.jpg(中心no-repeat＃305d00;身高：20px;}

#content { background:#fff; min-height:500px; margin-left:0%;}
.container {width:1200px; height:100%;margin:auto;  overflow:auto; overflow-y:hidden; overflow-x:hidden; margin-left:20%;}
.product_item { min-height:280px; width:270px; margin:20px; float:left;}
.number_icon { height:56px; width:56px; background:url(../images/dropcap1.gif); text-align:center; font-size:43px; float:left; margin-bottom:10px; color:#FFF; }
.product_desc { line-height:20px; min-height:60px; color:#696969; margin-top:10px; font-size:14px; font-style:italic; auto;}

我真的与布局发生的事情感到困惑，非常感谢任何愿意提供帮助的人，谢谢。

Answer 1

p.s避免发布数据库变量或密码使用flex取得一致的结果，我将您删除的PHP代码以简单起见，只需在必要时回声

.product_item{
 display:flex;
 flex-direction:column;
}
.product_item .title_area{
 display:flex;
 flex:1;
 align-items: center;
}
.product_item .number_icon{
 background:green;
 width:20px;
 height:20px;
 border-radius:50%;
 color:white;
 text-align:center;
 line-height:20px;
 margin-right:5px;
}
.product_item img{
 width:100%;
 max-height:200px;
 object-fit:cover;
}

 <div class="container">
         
             
            <div class="product_item">
            <div class="title_area">
              <div class="number_icon">1</div>
              <h2 class="product_title">Furniture</h2>
            </div>
                 
                <img src="http://placehold.it/200x150">
                <p class="product_desc">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                </p>
                <a href="product_detail.php">Read More</a><br><br><br>
                </div>
            </div>
            <!--- END CONTENT WRAPPER -->
   </div>