Question

编辑： 现在感谢'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>

Answer 1

我认为你可以使用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>

将图像img与文本框对齐

1 个答案: