样式php/mysql数组在一个div

所以我已经学会了将有序列表输出转换为div输出。太棒了。

我的问题是现在让数组的输出堆叠在彼此的顶部(并排关于两个div)就像输出一样，如果它是在一个有序的列表中。

原代码为:

<?php 
// Script Error Reporting
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>
<?php 
// Run a select query to get my letest 4 items
// Connect to the MySQL database  
include "storescripts/connect_to_mysql.php"; 
$dynamicList = "";
$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 4");
$productCount = mysql_num_rows($sql); // count the output amount
if ($productCount > 0) {
while($row = mysql_fetch_array($sql)){ 
         $id = $row["id"];
         $product_name = $row["product_name"];
         $price = $row["price"];
         $date_added = strftime("%b %d, %Y", strtotime($row["date_added"]));
         $dynamicList .= '<table width="100%" border="0" cellspacing="0" cellpadding="6">
    <tr>
      <td width="17%" valign="top"><a href="product.php?id=' . $id . '"><img                   
style="border:#666         1px     solid;" src="inventory_images/' . $id . '.jpg" alt="' .     
$product_name . '" width="77" height="102" border="1" /></a></td>
      <td width="83%" valign="top">' . $product_name . '<br />
        $' . $price . '<br />
        <a href="product.php?id=' . $id . '">View Product Details</a></td>
    </tr>
  </table>';
}
} else {
$dynamicList = "We have no products listed in our store yet";
}
mysql_close();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1    
/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Shop</title>
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
</head>
<body>
<div align="center" id="mainWrapper">
  <?php include_once("template_header.php");?>
  <div id="pageContent">
  <table width="85%" border="0" cellspacing="0" cellpadding="0">
  <tr>
<td width="14%" valign="top"><h3></h3>
  <p><br />
    <br />
    </p></td>
<td width="66%" align="center">
    <h3>The Shop </h3>
  <p><?php echo $dynamicList; ?><br />
    </p>
  <p><br />
  </p></td>
<td width="20%" valign="top"><h3></h3>
    <p></p></td>
  </tr>
</table>
  </div>
  <?php include_once("template_footer.php");?>
</div>
</body>
</html>

我得到了这个答案:

<?php
  ...
  $dynamicList .= '
  <div id="leftcolumn">
    <a href="product.php?id=' . $id . '"><img style="border:#666 1px solid;"     
src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="77" height="102" 
border="1" /></a>
  </div>
  <div id="rightcolumn">' . $product_name . '<br />
    $' . $price . '<br />
    <a href="product.php?id=' . $id . '">View Product Details</a>
  </div>';
  ...
?>
...
<div id="pageContent">
  <h3>The Shop </h3>
  <?php echo $dynamicList; ?>
</div>

这在输出列表方面非常有效。但是，当我将这个CSS添加到新的div:

时，这些项无法填充。

leftcolumn {
    position: fixed;
    height: 77%;
    width: 18.5%;
    top: 23.8%;
    right: 60.65%;
    bottom: 4.5%;
    background-color: blue;
    padding-top: 2.5%;
}

#rightcolumn {
    position: fixed;
    top: 23.8%;
    padding-top: 2.5%;
    right: 23.5%;
    height: 77%;
    width: 37%;
    bottom: 4.5%;
    background-color: black;  
}

关于如何通过CSS样式填充数组有什么想法吗?或者哪里出了问题?

尝试使用类而不是id。如html/php所示:

$dynamicList .= '
    <div class="element">
        <div class="leftcolumn">
            <a href="product.php?id=' . $id . '"><img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></a>
        </div>
        <div class="rightcolumn">
            ' . $product_name . '<br />
            $' . $price . '<br />
            <a href="product.php?id=' . $id . '">View Product Details</a>
        </div>
    </div>';

这是你的css:

.element {
    float: left;
    clear: left;
}
.leftcolumn {
    position: relative;
    float: left;
}
.rightcolumn {
    position: relative;
    float: left;
}

也检查这个提琴:http://jsfiddle.net/JrtgL/26/

相关内容

最新更新

热门标签：