【发布时间】：2014-01-22 22:48:38
【问题描述】：
我有两个问题：
- Div 未正确对齐
- 如果缩略图超过它们所在的 div 的宽度，如何强制缩略图水平排列，并使用水平滚动条（用于滚动）？
我不想使用任何外部 js 库。我试图让它在纯 css 和 bootstrap 3 中工作。
这是我目前所拥有的：
<div class="row">
<div class="col-md-10">
<div class="item">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-5">
<div class="main-img">
<img height="500px" width="500px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="img-list">
<div class="col-md-3">
<img width="100px" height"100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
<div class="col-md-3">
<img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
<div class="col-md-3">
<img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
<div class="col-md-3">
<img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<span> Title! </span>
<span> Some other text!</span>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<!-- Some other html here -->
</div>
</div>
我画了一个布局应该是什么的图像：
棕色区域是 col-md-10，其中包含以下内容：
- 粉色区域为主img（col-md-5）
- 粉红色下方的深灰色区域是缩略图的水平列表（缩略图是 col-md-3，不确定这是否最好？）
- 浅灰色区域只是文字说明（col-md-7）
虽然我没有画 col-md-2（它在 col-md-10 棕色区域的右侧）。
相反，我看到一堆 div 飞来飞去。缩略图列表浮动在右上角，但主 img 和 col-md-7 正确并排。缩略图列表甚至没有正确对齐。有人可以帮忙吗？
【问题讨论】：
-
只是检查一下，如果图像比它们宽，你想让所有的 div 滚动吗？大多数人使用
.responsive-img类来确保图像永远不会超过其容器的宽度（max-width: 100%）。 jsbin.com/aMufOVu/2/edit -
@davidpauljunior 不，如果图像太多，我只想缩略图列表 div 有一个水平滚动条。现在我有一些缩略图，但想象一下如果这个列表变成了 1000 个缩略图。我不希望添加更多缩略图时缩略图变小，但我希望它们具有固定大小，但只有一个滚动条，以便用户可以滚动查看其他缩略图。跨度>
标签： html css twitter-bootstrap twitter-bootstrap-3