Question

我有一个显示图像的div容器，在该图像上方我想显示一个表格。所以，我的问题是表格没有显示在图像上。相反，它显示在图像之后？有人可以告诉我如何在图像上方对齐表格吗？

<div id="foto2">
    <img src="foto2.jpg" class="bg"> <span class="oben">
    <table>
        <tr>
            <td onclick="playAudio('test.mp3')">Hamdullah</td>
            <td onclick="playAudio('test2.mp3')">Was?</td>
        </tr>
        <tr>
            <td onclick="playAudio('test.mp3')">Penner</td>
            <td onclick="playAudio('test2.mp3')">Heidefick</td>
        </tr>
    </table>
    </span>
</div>

我的css：

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color:#00061c;
}
img.bg {
    width: 100%;
}
.oben {
    left: 0;
    width: 100%;
}
@font-face {
    font-family: "Hallo";
    src: url(hallo.ttf);
}
table {
    width:100%;
    color:#FFF;
}
tr {
    text-align:center;
}
td {
    font-family: Hallo;
    font-size: xx-large;
}

Answer 1

您是否尝试将图片放在桌子后面，例如？

 </table>
     <img src="foto2.jpg" class="bg" />

或者将它放在表格的最下面一行，如：

 <tr>
    <td onclick="playAudio('test.mp3')">Penner</td>
    <td onclick="playAudio('test2.mp3')">Heidefick</td>
 </tr>
 <tr>
   <td><img src="foto2.jpg" class="bg"></td>
 </tr>
 </table>

顺便说一下你为什么要使用<span>并将<table>放在里面？

Answer 2

尝试在结束范围标记

之后插入它

<div id="foto2">
    <span class="oben">
        <table>
            <tr>
                <td onclick="playAudio('test.mp3')">Hamdullah</td>
                <td onclick="playAudio('test2.mp3')">Was?</td>
            </tr>
            <tr>
                <td onclick="playAudio('test.mp3')">Penner</td>
                <td onclick="playAudio('test2.mp3')">Heidefick</td>
            </tr>
        </table>
    </span>
    <img src="foto2.jpg" class="bg" />
 </div>

Answer 3

为了看到你的桌子“在上面”（我想你的意思是在z轴上。）所以图像显示为桌子的背景你可以使用2个替代解决方案

1）你的foto2 div的背景。 2）绝对定位表

备选方案1：foto2 div的背景。

enter image description here 我不认为你需要一个带有左属性的oben规则来定位一个未定位的元素（它实际上也不会工作）。除非你有一个非常特别的原因，否则我将把它留在游戏中... mmmm

这是fiddle

这是foto2 div的css。您可以随意调整重复和其他属性

#foto2 {
  background:url( your image url here );
}

这是html

<div id="foto2"> 
 <table>
 <tr>
    <td onclick="playAudio('test.mp3')">Hamdullah</td>
    <td onclick="playAudio('test2.mp3')">Was?</td>
 </tr>
 <tr>
     <td onclick="playAudio('test.mp3')">Penner</td>
    <td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
</table>

 </div>

备选方案2：绝对定位表

使用此替代方法，您可以使用全宽图像，而不受表格大小的限制。它的你的电话使用的替代方案你的foto2 div应该是相对的。然后....

table { 
    position:absolute;
    top:0px;
width:100%;
color:#FFF;
}

这里是绝对表的fiddle

将表格对齐div

3 个答案: