我试图使所有4行图像都具有相同的高度尺寸,我已经尝试使用css来播放宽度和高度但似乎没有任何效果,肖像图像总是比景观图像更高,这里是代码:
<div class="container" > <div class="jumbotron" style="background: rgba(200,54,0.0);"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> <p style="width: 200px; overflow: hidden; white-space: Nowrap; text-overflow: ellipsis; ">One Random Item</p> <p>50 €</p> </div> <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> <p style="width: 200px; overflow: hidden; white-space: Nowrap; text-overflow: ellipsis; ">Another Random Item</p> <p>50 €</p> </div> <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> <a href="#"><img class="left-block img-responsive" src="images/genimage2.jpg" height="160" width="160" alt="" /></a> <p style="width: 200px; overflow: hidden; white-space: Nowrap; text-overflow: ellipsis; ">Another another Random Item</p> <p>50 €</p> </div> <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> <p style="width: 200px; overflow: hidden; white-space: Nowrap; text-overflow: ellipsis; ">Any other Random Item Any other Random Item </p> <p>50 €</p> </div> </div>
这是发生的事情:
这就是我想要的(所有都有相同的高度)
解决方法
原文地址:https://www.jb51.cc/html/225260.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。