在帶有負邊距的文字旁邊創建圖像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>