画廊网格在实时服务器中溢出

Question

我有一份 HTML 文件。当我运行它在本地主机时它运行很好。但是当我在实时服务器中运行时出现问题。图库项目溢出。但有趣的是，当我调整 windows 的大小时，它会自动修复。我用过 Magnific popup 和 Isotope。

Images that shows in live server

这是我的 html 代码：

<div class="gallery"> 
            <div class="row"> 
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item department doctor patient" href="assets/images/gallery/gallery-3.jpeg"> 
                    <img src="assets/images/gallery/gallery-3.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item doctor department" href="assets/images/gallery/gallery-4.jpeg"> 
                    <img src="assets/images/gallery/gallery-4.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item department" href="assets/images/gallery/gallery-5.jpeg"> 
                    <img src="assets/images/gallery/gallery-5.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item doctor department" href="assets/images/gallery/gallery-6.jpeg"> 
                    <img src="assets/images/gallery/gallery-6.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item surgery department" href="assets/images/gallery/gallery-7.jpeg"> 
                    <img src="assets/images/gallery/gallery-7.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item patient" href="assets/images/gallery/gallery-8.jpeg"> 
                    <img src="assets/images/gallery/gallery-8.jpeg" alt="" class="gallery-img" />
                </div>
                <div class="col-sm-6 col-md-4 gallery-item doctor" href="assets/images/gallery/gallery-9.jpeg"> 
                    <img src="assets/images/gallery/gallery-9.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->

            </div> <!-- end .row -->
        </div> <!-- end .gallery -->

Answer 1

这与您的图片加载方式有关。我猜他们正在实时服务器上调用服务器，然后使用 JavaScript 注入 DOM。 There are a variety of ways 解决此问题，但最简单的方法是在图片标签上添加宽度和高度属性。

画廊网格在实时服务器中溢出

Gallery grid overflowing in live server

html

grid

overflow

gallery

jquery-isotope