0

我知道如何在图像上放置一些文本，但是当该文本包含不同的类、不同的文本样式时，文本行会重叠在一起。

这是只有一种文本样式的简单 html 代码：

<li style="" class="portfolio-content-CV">
    <div class="contentCV"><img src="images/backgr.png" height="500" width="510">
        <p class="auto-style2"><span lang="es">yada yada</span></p>
    </div>
</li>

这是不起作用的代码：

<li style="" class="portfolio-content-CV">
<div class="contentCV"><img src="images/backgr.png" height="500" width="510">
        <p class="auto-style2"><span lang="es">yada yada</span></p>
        <p class="auto-style1"><span lang="es">bla bla bla</span></p>
    </div>
</li>

css的格式如下：

#portfolio-list .portfolio-content-CV a{
    width: 510px;
    float: left;
    height:500px;
    display:?table;
    border:0.5px solid grey;
}

.contentCV {
    width: 510px;
    position: relative;
    float: left;
    cursor: pointer;
    padding: 0px 0px 0px 0px;
    background: #FFF;
    border: 0px solid #E2E2E2;
    margin-right: 10px;
    margin-bottom: 10px;
    display:table-cell;
    vertical-align:bottom;
}

.contentCV a.titlesmall {   display: none; }

.auto-style2 {
    margin-left: 20px;
    font-family: "AGENCYR";
    font-size: 0.5em;
    position: absolute;   
    top: 6px; 
    left: -8px; 
    width: 100%;
    color: #000000;
}

.auto-style1{
    margin-left: 16px;
    font-family: "AGENCYR";
    font-size: 0.5em;
    position: absolute;   
    top: 6px; 
    left: -8px; 
    width: 100%;
    color: #000000;
}

知道如何让具有不同文本样式的复杂文本重叠在图像上吗？o_O

4

1 回答 1

0

它们重叠的原因是因为它们具有相同的定位：

top: 6px; 
left: -8px;

和绝对定位的元素往往会相互重叠。

因此，您可以创建一个 div 包装器并将 p 标签放入其中：

<div class="textWrapper">
   <p class="auto-style2"><span lang="es">yada yada</span></p>
   <p class="auto-style1"><span lang="es">bla bla bla</span></p>
</div>

CSS：

.textWrapper{
    position: absolute;   
    top: 6px; 
    left: -8px; 
}

确保从<p>标签中删除绝对位置

于 2013-10-24T08:26:35.407 回答