Question

我有以下html：

<div id="image">
 <a href="link" title="some link"><img src="someimage"><p id="imagecaption">Some Link</p></a>
</div>

和css：

#mainimage a {
text-decoration: none;
border-bottom: 0;
}

#imagecaption {
position: absolute;
bottom: 0;
width: 100%;
text-align: right;
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
}

这给了我一个漂亮的半透明条形图，它在图像的底部，我用它来描述图像中的内容。图像和条形图都可以点击并转到同一个地方。

但我目前遇到两个问题。首先显然你不能在<p>标记内使用<div>和<a>之类的内容。我该怎么用？

其次，理想情况下我想将条形图中的文本填入远离右边缘的10px，这样文本就不会在右边对接。我不能在栏上使用padding-right: 10px，因为我已经指定了宽度，这会导致边框模型出现问题。

有什么想法吗？谢谢。

Answer 1

考虑使用<span>代替<p>

#imagecaption {
    position:absolute;
    left:0; right:0; bottom:0;
    padding-right:10px; /* avoids box sizing issue */
    text-align:right;
    background:#000; /* for compatibility, use background not background-color */
    background:rgba(0,0,0,0.6);
}

Answer 2

我会这样做：http://jsfiddle.net/mikea80/jvse9/

<a href="#" title="some link">
    <div id="image">
        <img src="http://www.w3schools.com/images/pulpit.jpg" />
        <div id="imagecaption">Some Link</div>
    </div>
</a>

a {
    text-decoration: none;
    border-bottom: 0;
}
#image {
    width:304px;
    height:228px;
    margin:0 auto;
    border:1px solid #000;
    overflow:hidden;
}
#imagecaption {
    clear:both;
    position: relative;
    display:block;
    width: 100%;
    height:45px;
    text-align: right;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.6);
    padding:10px 10px 0 0;
    color:white;
    margin:-45px 0 0 -10px;
    overflow:hidden;
}

替换标记内部的div，右边使用文本右对齐填充

2 个答案: