【发布时间】：2021-07-24 22:56:15
【问题描述】：
我需要为类别页面隐藏一些项目。当 jquery 触发 display: none 时，该元素会在视觉上隐藏。但是，它仍然是空白。这些项目是由循环生成的，但如果我使用 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>我需要隐藏的元素是类名：“.project-grid-wrapper”
我查看了主题 (https://w8.foxdsgn.com/prague/work-grid/)，尝试使用代码检查器隐藏元素，甚至尝试删除元素。同样的事情正在发生。即使代码中不存在该元素，它也会为该元素保留空白。
现在，我有点不知所措，需要专家建议。
提前感谢您这么酷。 :)
【问题讨论】：
-
display不会释放它。使用visibility:hidden -
visibility: hidden 在这里有同样的效果。刚试过，不行。
-
尝试隐藏
.portfolio-item-wrapp -
display: none 是用来阻止元素占用任何空间的正确方法（visibility: hidden 只是停止它显示，空间仍然被占用）所以它必须是祖先元素持有空间，是需要设置为显示的空间：无。
-
显示和可见性没有任何效果，因为您使用
position: absolution,定位每个“portfolio-item-wrapp”部门，我假设使用 JavaScript。如果您要继续使用代码定位每个图像，则需要触发调整大小事件以使浏览器重新计算所有内容的位置，或者您可以只使用 flex。
标签： javascript html jquery css responsive-design