生成照片「貼」到縮略圖標籤的邊界

Question

我創建的員工列表（2項各行中），和我遇到的幾個問題：

• 我想要的圖片使用全列表項的左側的空間 - 的例子是在這裏：http://2fm9xz2drvqemrbu.zippykid.netdna-cdn.com/wp-content/uploads/2013/01/facebook-search-results.jpg
• 與縮略圖級列表項的邊界倒是對方 - 我想有一些填充

我的例子中撥弄：http://jsfiddle.net/bC4Wy/

我的列表項代碼：

<div class="col-sm-6 col-xs-12 thumbnail"> 
    <div> 
     <div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/" /></div> 
     <div class="col-xs-9"> 
      <div class="h4">Paul Smith</div> 
      <div>Title: Developer</div> 
      <div>Skills: C#, .NET</div> 
     </div> 
    </div> 
</div> 

Answer 1

我看到你正在使用的縮略圖，並把山坳的「關口」裏面直接。

您可以考慮不使用縮略圖都：

<div class="col-sm-6 col-xs-12 listitem"> 
    <div class="row"> 
    <div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/"/></div> 
    <div class="col-xs-9"> 
     <div class="h4">Paul Smith</div> 
     <div>Title: Developer</div> 
     <div>Skills: C#, .NET</div> 
    </div> 
    </div> 
</div> 

CSS

.listitem { 
    border-radius: 5px; 
    border: 1px solid black; 
    overflow-y:hidden; 
} 

.listitem img {margin-left: -15px;} 

我還增加了額外的row，以確保您的佈局將是一致的。您可能需要爲mozilla和webkit的邊框半徑添加樣式。