PHP 数据回显布局不正确

Question

我正在尝试创建一个 PHP 页面，一次显示一个表中的 6 个数据，但是这些数据的显示方式存在布局问题，我认为这个问题来自样式

布局应该是这样的: Screen shot 01 Screen shot 02

我已经尝试使用下面代码中的每个 div 元素，但是，我无法找到像图像一样显示数据的正确宽度，现在我不确定问题出在哪里布局来自。

它是这样的: Screen shot

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 { background:url(../images/bg_top_img.jpg) center 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>