EDIT: 多亏了' olly_uk '
EDIT2: 现在可以工作了，但是盒子的对齐是错误的。你可以在这里查看截图。如果没有任何文本，它将完美地与每一行上的2个框对齐，彼此之间保持完美的距离，但如果有文本，它将在彼此的下方进行回声。为什么?
我正在尝试回显图像，然后在该图像中，我想从数据库回显文本。它返回图像(3，因为数据库中只有3个产品示例)，但产品在框中没有对齐。它在它下面。我已经在谷歌上搜索过了，但是没有找到任何东西
是否甚至可以使用例如margin-top来移动张贴的echo，以便我可以在框中对齐它?
我想在PHP中使用样式或类…
示例图片:image
添加<style>p{...};h3{...};</style>工作
代码示例
<!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=iso-8859-1" />
<title>BOX</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<style>
p {
position:relative;
top:-240px;
left:180px;
}
h3 {
position:relative;
top:-270px;
left:30px;
}
</style>
</head>
<?php
include 'includes/connection.php';
$query = "SELECT * FROM products";
$result = mysql_query($query);
?>
<body>
<div class="header navpos c1" id="nav">
<table summary="header" border="0">
<tr>
<td>
<ul>
<li class="home"><a href="index.html"></a></li>
</ul>
</td>
<td>
<ul>
<li class="about"><a href="about.html"></a></li>
</ul>
</td>
<td>
<ul>
<li class="contact"><a href="contact.html"></a></li>
</ul>
</td>
<td>
<ul>
<li class="twitter"><a href="index.html"><img src="includes/images/f_logo.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></li>
</ul>
</td>
<td>
<ul>
<li class="facebook"><a href="index.html"><img src="includes/images/t_logo.png" alt="link to Syndicate Plus Twitter" /></a></li>
</ul>
</td>
</tr>
</table>
</div>
<div class="offers">
<div class="content_box">
<?php
while($products = mysql_fetch_array($result)) {
echo '<img src="includes/images/content_box.png" border=0 />';
echo "<h3>" . $products['products'] . "</h3>";
echo "<p>" . $products['description'] . "</p>";
}
?>
</div>
</div>
</body>
</html>
我认为你可以使用CSS实现这一点。通过有一个负的顶部来碰撞文本在图像的顶部。我会给一些示例代码，当我回家。
同时查看这个，w3schools CSS-positioning
希望有帮助
编辑:添加代码来显示我的意思
<html>
<head>
<title>text over image</title>
<style>
p {
position:relative;
top:-200px;
}
h2 {
position:relative;
top:-140px;
}
</style>
<head>
<body>
<img src="/images/office1.jpg" alt="demo image"/>
<h2>test text</h2>
<p>test desciption text</p>
<hr/>
<img src="/images/office1.jpg" alt="demo image"/>
<h2>test text</h2>
<p>test desciption text</p>
</body>