html - 在带有负边距 CSS 的文本旁边创建图像

Question

我是 CSS 新手，所以请多多包涵。

我正在尝试使用 CSS 创建此设计:

图像不是简单地 float 在文本的左侧。图像比文本高，并且有一点负 margin-top。

但是，我有两个问题:

1. 当我尝试使用 margin-top 时，图像向上移动，但移动部分被裁剪掉了。
2. 我不能让文字比图片短。它始终遵循图像的高度。

我需要使用 %，这让我的事情变得更复杂。

编辑这是 html:

<li class="box">
<img class="picture" src="images/HotPromo/tagPhoto1.png"/>
<p class="name"><b>Name</b></p>
<p class="location"></p>
<p class="hidden"></p>
</li>

这是CSS:

#listHotPromo{
    background: #c4a76e;
    margin: 0 5% 0 5%;
    width: 90%;
    border-radius: 3%;
    /*show background*/
    overflow: auto;
}

.box{
    background: #e8c07a;
    margin: 5% 5% 10% 5%;
    border-radius: 3%;
    /*show background*/
    overflow: auto;
}

.box img {
    float:left;
    width: 30%;
}

.box p {
    width: 50%;
    float: left;
}

感谢任何帮助，如果您需要什么，请问我。

谢谢你的帮助:D

Answer 1

试一试:

CSS:

#wrapper {
  width: 200px;
  height: 100px;
  position: relative;
}
.image {
  width: 50px;
  height: 50px;
  position: absolute;
  top: -15px;
  left: 0;
}

HTML:

<div id="wrapper">
    <div class="image">
        <img src="images/your-image-here.png" alt="" title="" />
    </div>
</div>

当然，所有这些只是一个示例，您需要根据自己的需要进行修改。但是，如果您使用 position: relative 作为文本部分包装器，并为图像本身设置 position: absolute ，它将覆盖文本，您可以使用 top: 0; 将图像放在您喜欢的任何位置；左:0；右:0；底部:0；属性。

如果有帮助请告诉我 ;)

编辑:

HTML:

<div id="listHotPromo">
    <div class="box">
        <img src="images/your-image-here.png" alt="" title="" />
        <p><b>Name</b></p>
        <p>Post Location Here</p>
        <p>Post phone number here</p>
    </div>
</div>

CSS:

#listHotPromo{
    width: 600px;
    height: 200px;
    margin: 0 5%;
    background: #c4a76e;
    border-radius: 3%;
    position: relative;
    z-index: 1;
}

.box{
    width: 500px;
    height: 150px;
    margin:  0 auto;
    background: #e8c07a;
    border-radius: 3%;
    position: relative;
    top: 23px;
    z-index: 2;
}

.box img {
    width: 150px;
    height: 150px;
    position: absolute;
    top: -15px;
    left: -20px;
}
.box p {
    width: 350px;
    padding: 0;
    margin: 0;
    float: right;
}

这是您可以查看的链接示例:http://jsfiddle.net/6rUrW/