0

我有一个带有<p>标签内文本的 div 和一个 PNG 图像。我希望图像位于 div 的左侧，文本重叠。我曾尝试使用 z-index，但收效甚微。

HTML 代码：

<div class="caption">
    <img src="images/stain.png" id="stain">
    <p>The BA New Media course which I am studying is run by the Institute of Comminications Studies (ICS) at The University of Leeds. The Institute of Communications Studies is an internationally renowned centre for teaching and research in communications, media and culture. Their research is multidisciplinary and has particular strengths in the areas of cultural industries, international communication and political communication. <a href="http://ics.leeds.ac.uk/about/" target="_blank"><strong class="more">Read More...</strong></a>
</div>

CSS 代码：

.caption {
    width:80%;
    display:block;
    margin:auto;
    margin-top:5%;
    z-index:5;
}

#stain {
    z-index:1;
}
4

1 回答 1

4

如果我了解您的要求，您可以将您的图像设置为<div>背景图像.. 在 css 中，如下所示：

.caption {
    background-image: url(images/stain.png);
    background-repeat:no-repeat;
    width:80%;
    display:block;
    margin:auto;
    margin-top:5%;
}

并<img>从<div>

就像我评论中的例子一样。

[编辑]
或者，如果您需要更多控制，请使用position: relativecss 等：


CSS：

    .caption {
        width:80%;
        display:block;
        margin:auto;
        margin-top:5%;
    }

    img.floaty {
      display:inline;
         float: left;
    }

    .blurb {
       position: relative;
        top:20px;
        left: -50px;
    }


html:

<div class="caption">
    <img class="floaty" src="images/stain.png" id="stain" />
    <p class="blurb">The BA New Media course which I am studying is run by the Institute of Comminications Studies (ICS) at The University of Leeds. The Institute of Communications Studies is an internationally renowned centre for teaching and research in communications, media and culture. Their research is multidisciplinary and has particular strengths in the areas of cultural industries, international communication and political communication. <a href="http://ics.leeds.ac.uk/about/" target="_blank"><strong class="more">Read More...</strong></a></p>
</div>

例如.

于 2012-05-03T17:59:01.783 回答