PHP数据回显未正确布局

时间:2019-07-08 06:39:29

标签: php html css

我正在尝试创建一个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)中心不重复#305D00; height: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;}

我真的对布局发生的事情感到困惑,非常感谢愿意帮助的人,谢谢。

1 个答案:

答案 0 :(得分:0)

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>