在带有负边距的文字旁边创建图像CSS

Question

我是CSS新手，请耐心等待。

我试着用CSS创建这样的设计：

的图像不是简单地浮在文本的左侧。图像比文本高，它有一个减号margin-top。

然而，我有2个问题：

1. 当我试图用边距，图像被向上移动，但移动部分被裁剪。
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> 

当然，所有这一切仅仅是一个例如，您需要修改以适应您的需求。但是，如果使用位置：相对于文本部分包装器，并且对图像本身具有绝对位置：它将覆盖文本，并且可以使用顶部将图像放在任何位置：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>