编辑:这要归功于“olly_uk”
EDIT2: 现在可以工作了，但是框的对齐方式是错误的。可以查看截图HERE .如果没有任何文本，它将与每行上的 2 个框完美对齐，彼此之间的距离完美，但对于文本，它会在彼此下方回显。为什么？
我正在尝试回显图像，然后在该图像中我想回显数据库中的文本。 好吧，它回显了图像(3，因为我在数据库中只有 3 个产品示例)，但产品没有在框中对齐。它在它下面。我在谷歌上搜索过但找不到任何东西
是否可以使用例如margin-top 移动发布的回显以便我可以在框中对齐它？
我想在 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>
关于php - 将图像 img 与框中的文本对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7997681/