显示与可见性

Question

在我的一页中，我可能有两种情况。

第一个，如果没有发现事件，则>]

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
        <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
        No event found!    </div>
</div>
或者如果至少发现了事件，则是这个

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
      <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
        <div class="mec-wrap colorskin-custom">
    <div class="mec-event-list-minimal">
            <article data-style="" class="mec-event-article mec-clear  mec-divider-toggle mec-toggle-202003-1210" itemscope="">
ARTICLE HERE
    </article>
                        </div>
</div>
        <div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
        Nessun evento trovato!    </div>
    </div>
我需要隐藏第一种情况，我看不到“未找到事件”我已经找到了一个解决方案的CSS。这项工作正常，但是如果我使用显示代替可见性，则代码将无法工作。在“ display：none”上工作正常，但是如果找到事件，我无法使其重新出现在结构中。我已经尝试过“显示”的所有值（块，弹性等），但没有人起作用]
https://codepen.io/MarcoRM69/pen/VwLrXWb

.mec-skin-list-events-container {  
visibility:hidden;  
}
.mec-skin-list-events-container > div {
  visibility:visible;
}
有什么建议吗？

在我的一页中，我有两种情况。如果没有找到事件，则第一个

[]

[display: none...不起作用，而visibility:hidden...起作用，因为display: none从页面上删除了受影响的元素，而visibility:hidden不起作用。

由于display:none删除了包含的div，因此您不能再要求显示包含的div。

从您的Codepen：

.mec-skin-list-events-container {  
  visibility:hidden; 
  /*display:none;*/

}
.mec-skin-list-events-container > div {
  visibility:visible;
  /*display:block;*/  
}

Answer 1

[display: none...不起作用，而visibility:hidden...起作用，因为display: none从页面上删除了受影响的元素，而visibility:hidden不起作用。