Question

我正在开发一个以照片库为特色的网站。照片库中的许多图像尺寸不同，但它们的宽度都相同。在平板电脑和桌面版本中，照片库形成4个整齐的列，行正确对齐。在智能手机版本中，它们形成2列（我想要的方式），但行未对齐。这就是问题所在。

我该如何解决这个问题？我试图在有问题的图像之间使用clearfix。有趣的事情发生了：编辑文件后的一小时，clearfix工作得很好。但不久之后问题又回来了。我已经重新启动了我的计算机，浏览器，清除缓存...仍然存在这种情况。

我在Windows和三星Galaxy智能手机上测试了Chrome，Firefox，Safari中未对齐的照片库。还在那里。

你可以在这里看到错位的照片画廊......这位艺术家描绘裸体模特，所以...成人内容咨询：www.ericeickmann.com/panel.html

我的CSS是标准的Bootstrap CSS文件夹，只有一些小的改动，例如。排版。我也在使用Lightbox：http://lokeshdhakar.com/projects/lightbox2请注意，在添加Lightbox代码之前，clearfix已停止工作。

这是我的HTML：

    <!-- row 1 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>

        <div class="clearfix visible-sm"></div>

        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
    </div>

    <!-- row 2 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>

        <div class="clearfix visible-sm"></div>

        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
    </div>

Answer 1

经过进一步阅读，我认为这个bug的解决方案是＆＃34;砌砖＆＃34;风格CSS，Javascript和JQuery。 Clearfix只是创建具有不同高度的Bootstrap照片画廊的一种解决方案，但我认为更优雅的解决方案在于上述技术。

为什么Bootstrap的clearfix类不在这里工作？

1 个答案: