Question

我正在构建一个投资组合网站，我希望在我的主页图片下添加html文本标题。图像以内联列表格式化，向左浮动。我对此有点新鲜，所以如果它非常简单，请耐心等待。我希望文本在每个图像下方左对齐，并在翻转时隐藏。

页： http://www.lauradimeo.com/TEST/index2.html

忘记添加 - 我希望这在平板电脑设备上看起来很棒。我知道翻转不起作用，否则它应该是ipad等友好。

谢谢你！

Answer 1

我认为我正在寻找使用仅限CSS（无Javascript）方法的内容： demo page

在我的第一个列表项中插入了一个div：

div.caption {
    width:200px;           /* Because your images are 200px wide, this must match */
    clear:both;            /* This places the div after the floated image */
    position:relative;     /* Required to set positioning on the line below */
    top:-100px;            /* The div would normally appear at the bottom of the image. Move it up a little. */
    margin-bottom:-500px;  /* A hack because the div causes the li to have a larger bottom margin. Not sure how to get around this */
    z-index:2              /* Will explain this later */
}

<li> ... <div class="caption">The quick brown fox jumped over the lazy dog</div></li>

我在你的li / a / img元素中添加了z-index属性：

#work ul li, #work ul li a, #work ul li a img {
    position: relative;    /* z-index only works on positioned elements */
    z-index: 1;            /* Default z-index 1 */
    display: block;
    float: left;
}
#work ul li a:hover, #work ul li a:active {
    position: relative;    /* Hover/active z-index 3 */
    z-index: 3;
}

如果您不熟悉，请查看如何使用 z-index 。在测试页面上，字幕div的z-index高于常规图像，但z-index低于鼠标覆盖的图像。

这有点hacky，但还有改进的余地。另外，仅供参考，您的页面在IE 7中看起来不正确 - 所有图像都显示在一列中。如果修复标记后，我的代码可能不需要黑客攻击。 =）

Answer 2

尝试将图像包装在像<div> - 标记这样的容器中（您也可以使用<table>）。将图像插入div标签并将文本也放入。鼠标悬停时，使用javascript隐藏文本并使图像变大。

Answer 3

另一种可能的解决方案是将图像绝对定位在您的图像中，并使用边距/填充将文本定位在图像下方，直到图像被鼠标悬停为止。虽然这种方法可能允许您保留无JavaScript悬停效果，但它可能不是最容易实现的，因为您的标记目前处于最佳状态。

Answer 4

您也可以尝试使用dl，dt，dd标签。它会得到相同的结果，你可以使用JavaScript来显示和隐藏文本。您可以指定DIV和DL的宽度。然后你可以让DL浮动：留在那个DIV里面。如果这有用，请告诉我。

链接到DL标签 http://www.w3schools.com/tags/tag_dl.asp

<div id="main-holder">
<dl id="box1" class="my-images">
<dt>Image</dt>
<dd>HTML Text</dd>
</dl>

<dl id="box2" class="my-images">
<dt>Image</dt>
<dd>HTML Text</dd>
</dl>
</div>

将文本标题添加到内联<li>图像</li>

4 个答案: