<a>...</a>标记超出缩略图宽度

时间:2016-01-01 13:00:23

标签: html css twitter-bootstrap col

我的缩略图有问题,我在缩略图中添加了TEXT标记,如果TEXT太长,则会导致TEXT超出缩略图宽度。期望:

+----------------------------------+
| Loremipsumdolorsitamet,consectetu|
| er                               |
|                                  |
+----------------------------------+

现实:

       col-md-6
+----------------------------------+
| Loremipsumdolorsitamet,consectetuer
|                                  |
|                                  |
+----------------------------------+

这是我的代码:

while()
{
    <div class="col-md-6">
       <div class="thumbnail" style="padding-left:10px; padding-top:5px">
       <a>Lorem ipsum dolor sit amet, consectetuer</a>
    </div>
   </div>
}

1 个答案:

答案 0 :(得分:0)

看一下这个例子:https://jsfiddle.net/ks3r78bu/

HTML:

<div class="img-cont">
  <img src="http://placehold.it/350x150" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

CSS:

.img-cont{
  width:350px;
  height:150px;
}
.img-cont p{
  margin:0px;
  padding:5px;
  position:relative;
  top:-150px;
  left:0px;
}
相关问题