在CSS中显示文本和图像

时间:2017-06-06 15:43:59

标签: php html css

我为Weapons for Sale设置了一个数据库,我在这里有我的PHP代码:

<?php

echo '<link rel="stylesheet" href="display.css" type="text/css">';

function FindPhoto($name)
{
    $dir_path = "http://www.chemicalzero.com/FireArms_Bis/Guns/";
    $extensions_array = array('jpg','png','jpeg');
    echo "<img src='$dir_path$name' style='width:100px;height:150px'>";
    echo "TESTING";
    echo "</div>"; 
}


$connection = mysql_connect('localhost', 'USER', 'PASSWORD');
mysql_select_db('DATABASE');

if(mysqli_connect_errno()){
    die("connection failed: "
    . mysqli_connect_error()
    . " (" . mysqli_connect_errno()
    . ")");
}

$query = "SELECT * FROM Guns"; //You don't need a ; like you do in SQL
$result = mysql_query($query);

echo "<table>"; // start a table tag in the HTML

while($row = mysql_fetch_array($result))
{   

   print 

   "<div id= 'item'>" .
   "<p>Make : ".$row["Make"]."</p>".
   "<p>Model: ".$row["Model"]."</p>".
   "<p>$".$row["Price"]."</p>".
   FindPhoto($row['Photo']);

}
echo "</table>"; //Close the table in HTML

mysql_close(); //Make sure to close out the database connection

我的PHP以正确的方式显示我数据库中的所有信息。当我合并CSS代码时,任务就出现了:

#item {
  width:100px;
  text-align:center;
  border: 5px solid #D9D9D9;
  padding: 0px;
  list-style: none;
  width: 150px;
  float: left;    
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  -moz-border-radius: 10px; /* firefox rounded corners */
  -webkit-border-radius: 10px; /* Safari rounded corners */
  min-height: 220px;
}

#item li h1 {
  text-align:center;
}

#item li#white {
   min-height: 220px;
}

CSS代码工作正常,除非我将两者合并,我得到一个看起来很棒的产品而另一个没有包含在CSS中。见图: WEBSITE

如何正确显示图像?

2 个答案:

答案 0 :(得分:1)

在查找图像功能后,您未关闭"<div class="item">"。 在."</div>"

之后添加FindPhoto($row['Photo']);

答案 1 :(得分:0)

您尚未在print语句中关闭div。

while($row = mysql_fetch_array($result))
{   

   print 

   "<div id= 'item'>" .
   "<p>Make : ".$row["Make"]."</p>".
   "<p>Model: ".$row["Model"]."</p>".
   "<p>$".$row["Price"]."</p>".
   FindPhoto($row['Photo']).
   // Here
   "</div>";

}`