0

如果它存在于数据库中，我想将文本放在图像上，如果它不存在，我想将它放在相同的位置。

我面临的问题是，如果有图像，则文本位于其下方，如果不存在，则文本将位于正确的位置，如附图中所述。代码如下：

<div class="category">
    <img src="home.php?cat={$mc.categoryid}"/>
    <div class="title">
       <h2>Some text</h2>
    </div>
</div>

我想做一些类似的事情：

<style>
.category{
   width: 400px;
   height: 400px
}

.title {
   position: relative;
   top: 3px;
   left: 0;
   width: 100%;
   height: 50px;
}
</style>

http://i.stack.imgur.com/HSSeN.png

4

3 回答 3

2

给你的容器category一个position. relative然后给positionof absoluteto .title。将position:absolute分配给它的任何内容都从正常的内容流中提取出来。容器上的position:relative;会将position:absolute元素保留在该空间内。但是您仍然可以将其移动到您想要的位置。因此，如果您想让它.title出现在右下角，请应用样式，例如right:0和bottom:0

小提琴

于 2013-04-26T01:53:58.543 回答
1

确保图像和文本都有position:absolute和，.category并且position:relative文本z-index高于图像的。

于 2013-04-26T01:53:06.130 回答
-1

有不止一种方法可以做到这一点。

方法 1. 将“标题”放在“类别”div 之外，如下所示：

<div class="category">
    <img src="home.php?cat={$mc.categoryid}"/>
</div>
<div class="title">
  <h2>Some text</h2>
</div>

方法 2. 将图像包含在另一个 div 中，并给出固定的宽度和高度，如下所示：

<div class="category">
    <div style="width:xx; height:yy;">
       <img src="home.php?cat={$mc.categoryid}"/>
    </div>
    <div class="title">
       <h2>Some text</h2>
    </div>
</div>

在上面，您使用自己的 xx 和 yy 值，具体取决于您要为图像分配多少。当然，它不必是内联 CSS。你可以再给它上课。

于 2013-04-26T01:59:42.047 回答