我正在尝试创建一个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;}
我真的对布局发生的事情感到困惑,非常感谢愿意帮助的人,谢谢。
答案 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>