显示 None 正在占用空间
Posted
技术标签:
【中文标题】显示 None 正在占用空间【英文标题】：Display None is taking space 【发布时间】：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。
【参考方案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 正在占用空间的主要内容，如果未能解决你的问题，请参考以下文章
javascript中 visibility和display区别在哪