时间戳

首页 > 解决方案 > 将多张图片放在一个表格单元格中

html - 将多张图片放在一个表格单元格中

问题描述

我正在尝试将多张图片放在一张桌子上 - 不幸的是没有成功。最终结果将是一张具有不同保龄球组合的桌子，因为它们在第一个球之后保持站立。因此，根据保龄球结果，我将通过相互放置适当的 pin 图像来创建图片。

对于测试，我只是尝试在矩形上放置一个圆圈：

它应该看起来像这样

这就是我得到的

那是我的代码，尝试了绝对和相对位置的所有组合......

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMG overlapping</title>


</head>
<body>

<table border='2'>

<tr><th>Pins after 1st Ball</th><th>Blabla</th></tr>

<tr><td>
<div style="position: relative; left: 0; top: 0;">
<img style="position: relative; left: 0; top: 0;" width='10%' src = './r.png'/>
<img style="position: relative; left: 0; top: 0;" width='10%' src = './k.png'/>
</div>
</td><td>Bla1</td></tr>

</table>


</body>
</html>

如果有人可以帮助我，那就太好了:)

谢谢！

PS：这是两张图片： k.png r.png

标签： htmlcssimage

解决方案

要将一个图像放在另一个图像之上，其中一个必须具有绝对位置。您只需对代码进行最少的更改即可实现。

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMG overlapping</title>


</head>
<body>

<table border="2">

    <tr>
        <th>Pins after 1st Ball</th>
        <th>Blabla</th>
    </tr>

    <tr>
        <td>
            <div style="position: relative; left: 0; top: 0;">
                <img width="10%" src="./r.png"/>
                <img style="position: absolute; left: 0; top: 0;" width="10%" src="./k.png"/>
            </div>
        </td>
        <td>Bla1</td>
    </tr>

</table>


</body>
</html>

请考虑学习以下内容：

  • 不要使用表格来处理布局，
  • 不要使用内联 CSS，而是使用外部文件。

推荐阅读