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

Question

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

我试图用 CSS 创建这个设计：

图像不只是漂浮在文本的左侧。图片比文字高，而且有一点负号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/

Answer 2

你可以试试这个方法：

• 图像是绝对定位的。
• 图像和文本的容器必须有一个大于或等于图像大小的填充。
• 文本处于正常位置。

• 使用负边距来定位图像。

  通过标记的设置，图像的定位将很容易。

`

        #divContainer {
            padding-left: 40px;
            display: block
        }
        #myImg {
            position: absolute;
            margin-left: -35px;
        }

`

    <div id="divContainer">
            <img  id="myImg" src="https://www.gravatar.com/avatar/5ae9a98711b2ceeeadf7a25175f19382?s=32&d=identicon&r=PG"/>
             <span id="MySpan">
                <b>PrimaryText</b>
                        <p>SecondaryText</p>
            </span>
          </div>
</div>