显示 None 正在占用 space

Question

我需要为类别页面隐藏一些项目。当 jquery 触发显示：none 时，该元素在视觉上变得隐藏。但是，它仍然是白色 space。这些项目是由一个循环生成的，但它仍然保留白色 space，如果我使用 chrome 的代码检查器从代码中删除一个元素。

这是我需要应用的页面主题：https://w8.foxdsgn.com/prague/work-grid/

在我的代码中：

.prague_gap_col15 {
    margin-left: -15px;
    margin-right: -15px;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.project-grid-wrapper {
    width: 100%;
    position: relative;
}

.project-grid-wrapper .project-grid-item-img-link {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    height: 240px;
}

.project-grid-wrapper .project-grid-item-img {
    width: 100%;
    height: calc(100% + 40px);
    background-color: #f2f2f2;
}

.project-grid-wrapper .project-grid-item-content {
    text-align: center;
    padding: 17px 0;
}

<div>
    <div class="row prague_grid prague_count_col3 prague_gap_col15 js-load-more-block no-footer-content prague-load-wrapper" data-columns="prague_count_col3" data-gap="prague_gap_col15" style="position: relative; height: 506px;">
        <div class="portfolio-item-wrapp portfolio-item-paralax  project_cat_10 project_cat" style="position: absolute; left: 0px; top: 0px;">
            <div class="portfolio-item">

                <div class="project-grid-wrapper">

                    <a class="project-grid-item-img-link" href="http://localhost/k2ah/works/23" target="_self" style="height:370px;">
                        <div class="project-grid-item-img project-thumb1" style="background-image: url('http://localhost/k2ah/resources/projects/23/thumb1.jpg');"></div>
                        <div class="project-grid-item-img project-thumb2" style="background-image: url('http://localhost/k2ah/resources/projects/23/thumb2.jpg');"></div>
                    </a>

                    <div class="project-grid-item-content">
                        <h4 class="project-grid-item-title"><a href="http://localhost/k2ah/projects/23" target="_self">Project A A</a></h4>
                        <div class="project-grid-item-category">X, Y</div>
                    </div>

                </div>

            </div>
        </div>
                                <div class="portfolio-item-wrapp portfolio-item-paralax  project_cat_11 project_cat" style="position: absolute; left: 400px; top: 0px;">
            <div class="portfolio-item">

                <div class="project-grid-wrapper">

                    <a class="project-grid-item-img-link" href="http://localhost/k2ah/works/24" target="_self" style="height:370px;">
                        <div class="project-grid-item-img project-thumb1" style="background-image: url('http://localhost/k2ah/resources/projects/24/thumb1.jpg');"></div>
                        <div class="project-grid-item-img project-thumb2" style="background-image: url('http://localhost/k2ah/resources/projects/24/thumb2.jpg');"></div>
                    </a>

                    <div class="project-grid-item-content">
                        <h4 class="project-grid-item-title"><a href="http://localhost/k2ah/projects/24" target="_self">Project A B</a></h4>
                        <div class="project-grid-item-category">A, B</div>
                    </div>

                </div>

            </div>
        </div>
                                <div class="portfolio-item-wrapp portfolio-item-paralax  project_cat_11 project_cat" style="position: absolute; left: 800px; top: 0px;">
            <div class="portfolio-item">

                <div class="project-grid-wrapper">

                    <a class="project-grid-item-img-link" href="http://localhost/k2ah/works/25" target="_self" style="height:370px;">
                        <div class="project-grid-item-img project-thumb1" style="background-image: url('http://localhost/k2ah/resources/projects/25/thumb1.jpg');"></div>
                        <div class="project-grid-item-img project-thumb2" style="background-image: url('http://localhost/k2ah/resources/projects/25/thumb2.jpg');"></div>
                    </a>

                    <div class="project-grid-item-content">
                        <h4 class="project-grid-item-title"><a href="http://localhost/k2ah/projects/25" target="_self">Project B B</a></h4>
                        <div class="project-grid-item-category">M, T</div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

我需要隐藏的元素具有 class 名称：“.project-grid-wrapper”

我查看了主题 (https://w8.foxdsgn.com/prague/work-grid/)，尝试使用代码检查器隐藏元素，甚至尝试删除元素。同样的事情正在发生。它对该元素保持白色 space，即使代码中不存在该元素。

现在有点懵，求高人指点

在此先感谢您的出色表现。 :)

Answer 1

之所以在隐藏元素时显示空白，是因为所有元素都使用 position: absolute 定位，它们具有硬编码坐标。

因此，您可以尝试对主容器使用 display: grid：

.prague_gap_col15 {
    margin-left: -15px;
    margin-right: -15px;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.project-grid-wrapper {
    width: 100%;
    position: relative;
}

.project-grid-wrapper .project-grid-item-img-link {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    height: 240px;
}

.project-grid-wrapper .project-grid-item-img {
    width: 100%;
    height: calc(100% + 40px);
    background-color: #f2f2f2;
}

.project-grid-wrapper .project-grid-item-content {
    text-align: center;
    padding: 17px 0;
}

/*added*/
.prague_grid
{
  --colWidth: 150px; /* max width per column */
  --colNum: 3; /* number of columns */
  --colGap: .5rem; /* gap between columns */ 
  max-width: calc((var(--colWidth) + var(--colGap)) * var(--colNum));
  margin: auto;
  display: grid;
  grid-gap: var(--colGap);
  align-items: flex-start;
  grid-template-columns: repeat(auto-fit, minmax(var(--colWidth), 1fr));
}

<div>
    <div class="row prague_grid prague_count_col3 prague_gap_col15 js-load-more-block no-footer-content prague-load-wrapper" data-columns="prague_count_col3" data-gap="prague_gap_col15">
        <div class="portfolio-item-wrapp portfolio-item-paralax  project_cat_10 project_cat">
            <div class="portfolio-item">

                <div class="project-grid-wrapper">

                    <a class="project-grid-item-img-link" href="http://localhost/k2ah/works/23" target="_self">
                        <div class="project-grid-item-img project-thumb1" style="background-image: url('http://localhost/k2ah/resources/projects/23/thumb1.jpg');"></div>
                        <div class="project-grid-item-img project-thumb2" style="background-image: url('http://localhost/k2ah/resources/projects/23/thumb2.jpg');"></div>
                    </a>

                    <div class="project-grid-item-content">
                        <h4 class="project-grid-item-title"><a href="http://localhost/k2ah/projects/23" target="_self">Project A A</a></h4>
                        <div class="project-grid-item-category">X, Y</div>
                    </div>

                </div>

            </div>
        </div>
        <div class="portfolio-item-wrapp portfolio-item-paralax  project_cat_11 project_cat">
            <div class="portfolio-item">

                <div class="project-grid-wrapper">

                    <a class="project-grid-item-img-link" href="http://localhost/k2ah/works/24" target="_self">
                        <div class="project-grid-item-img project-thumb1" style="background-image: url('http://localhost/k2ah/resources/projects/24/thumb1.jpg');"></div>
                        <div class="project-grid-item-img project-thumb2" style="background-image: url('http://localhost/k2ah/resources/projects/24/thumb2.jpg');"></div>
                    </a>

                    <div class="project-grid-item-content">
                        <h4 class="project-grid-item-title"><a href="http://localhost/k2ah/projects/24" target="_self">Project A B</a></h4>
                        <div class="project-grid-item-category">A, B</div>
                    </div>

                </div>

            </div>
        </div>
        <div class="portfolio-item-wrapp portfolio-item-paralax  project_cat_11 project_cat">
            <div class="portfolio-item">

                <div class="project-grid-wrapper">

                    <a class="project-grid-item-img-link" href="http://localhost/k2ah/works/25" target="_self">
                        <div class="project-grid-item-img project-thumb1" style="background-image: url('http://localhost/k2ah/resources/projects/25/thumb1.jpg');"></div>
                        <div class="project-grid-item-img project-thumb2" style="background-image: url('http://localhost/k2ah/resources/projects/25/thumb2.jpg');"></div>
                    </a>

                    <div class="project-grid-item-content">
                        <h4 class="project-grid-item-title"><a href="http://localhost/k2ah/projects/25" target="_self">Project B B</a></h4>
                        <div class="project-grid-item-category">M, T</div>
                    </div>

                </div>

            </div>
        </div>
        <div class="portfolio-item-wrapp portfolio-item-paralax  project_cat_11 project_cat">
            <div class="portfolio-item">

                <div class="project-grid-wrapper">

                    <a class="project-grid-item-img-link" href="http://localhost/k2ah/works/25" target="_self">
                        <div class="project-grid-item-img project-thumb1" style="background-image: url('http://localhost/k2ah/resources/projects/25/thumb1.jpg');"></div>
                        <div class="project-grid-item-img project-thumb2" style="background-image: url('http://localhost/k2ah/resources/projects/25/thumb2.jpg');"></div>
                    </a>

                    <div class="project-grid-item-content">
                        <h4 class="project-grid-item-title"><a href="http://localhost/k2ah/projects/25" target="_self">Project B A</a></h4>
                        <div class="project-grid-item-category">M, T</div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

为了理智起见，请避免使用内联样式...始终。

显示 None 正在占用 space

Display None is taking space

html

javascript

css

jquery

responsive-design