使图片"stick"到缩略图标签的边框

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

我看到你在使用缩略图，并把"col"直接放在col里面。

你可以考虑不使用缩略图:

<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的边框半径添加样式