如果达到最大高度,则使div水平溢出?

时间:2013-12-15 19:35:28

标签: html twitter-bootstrap twitter-bootstrap-3

我正在使用Bootstrap并尝试使用缩略图实现以下功能。

div #demo达到其最大高度然后在此高度水平溢出后生成任何内容并水平启用滚动条。我尝试overflow-x:auto和其他技巧,但div垂直溢出。关于如何做到这一点的任何想法?

<div class="row">
<a class="col-md-6 col-xs-12" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
<div id="demo" style="overflow-y: auto; max-height: 430px;">
<a class="col-md-4 col-xs-4" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
.....
</div>
</div>

1 个答案:

答案 0 :(得分:1)

看看这里:Create horizontally scrolling List Item view using Bootstrap Columns

并查看此示例:http://jsfiddle.net/V5zWT/10/

<div class="DocumentList">
<div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
</div>
</div>