制作图片＆＃34;坚持＆＃34;到缩略图标签的边框

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

我看到你正在使用缩略图并且放置＆＃34; col＆＃34;直接在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的边框半径添加样式。