我正在尝试移动缩略图并调整窗口大小时的可用空间。缩略图包含不同大小的图像，第一行似乎很好。但是，第二行的第一个缩略图似乎从第一行最长图像的底部开始。
我希望它做的是第一个缩略图或第二行恰好位于顶行的第一个拇指下方。
所有图像宽度相同。
一张图片说千言万语： https://snag.gy/JqgAIl.jpg
全部谢谢！
<div className="col-lg-8">
<div className="row">
<div className="col-xs-6 col-md-3">
<a href="#" className="thumbnail">
<img src="87.png" alt="..." />
<div className="caption">
</div>
</a>
</div>
<div className="col-xs-6 col-md-3">
<a href="#" className="thumbnail">
<img src="26.png" alt="..." />
<div className="caption">
</div>
</a>
</div>
<div className="col-xs-6 col-md-3">
<a href="#" className="thumbnail">
<img src="25.png" alt="..." />
<div className="caption">
</div>
</a>
</div>
<div className="col-xs-6 col-md-3">
<a href="#" className="thumbnail">
<img src="34.png" alt="..." />
<div className="caption">
</div>
</a>
</div>
<div className="col-xs-6 col-md-3">
<a href="#" className="thumbnail">
<img src="99.png" alt="..." />
<div className="caption">
</div>
</a>
</div>
<div className="col-xs-6 col-md-3">
<a href="#" className="thumbnail">
<img src="12.png" alt="..." />
<div className="caption">
</div>
</a>
</div>
</div>
</div>
答案 0 :(得分：1)
尝试使用jquery Masonary插件，它更好。
QFile file(filename);
QString encrypted;
QString content;
if (file.open(QIODevice::ReadOnly)) {
QTextStream stream( &file );
content = stream.readAll();
}
encrypted = content.replace("\n", "");
qDebug() << encrypted; // Returns correct encrypted value
QByteArray a;
a += encrypted;
qDebug() << "2 " + a; // Returns different value than previous qDebug()
QByteArray decrypted = crypto.Decrypt(a, key);
return decrypted;
$('.row').masonry({
// options
itemSelector: '.masonaryclass',
columnWidth: 200
});
答案 1 :(得分：0)
您可以通过在适当的断点处清除列中的float来解决此问题。由于您的缩略图布局仅在col-md- *（特别是col-md-3）处更改，因此您可以使用应用于第4列的nth-child选择器以992px执行此操作。
来自Sitepoint的因此表达式4n + 1将匹配第一个，第五个，第九个， 第十三，十七，二十一，等等，如果他们的元素 存在
：Understanding :nth-child Pseudo-class Expressions 并查看nth-child tester了解更多信息。
以下是您的布局似乎是什么的工作示例（我知道您正在使用 ReactJS ，但同样适用）。
<强>注意：
将此应用程序应用于网格时，请确保使用唯一标识符，以免干扰可能使用相同列类的应用程序的任何其他部分：在示例中.gallery与.row div一起使用，或者您可以单独为每个列添加类似.item的类，依此类推。
示例
@media (min-width: 992px) {
.gallery .col-md-3:nth-child(4n+1) {
clear: left;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row gallery">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x350" alt="alt" />
<div class="caption">
<strong>1</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x350" alt="alt" />
<div class="caption">
<strong>2</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x350" alt="alt" />
<div class="caption">
<strong>3</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x350" alt="alt" />
<div class="caption">
<strong>4</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x350" alt="alt" />
<div class="caption">
<strong>5</strong> Lorem Ipsum is simply dummy.
</div>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x350" alt="alt" />
<div class="caption">
<strong>6</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<strong>Side</strong>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</div>
</div>
</div>