Divs在設置顯示後重疊：沒有任何一個元素

Question

我正在爲我的項目製作註釋部分，並且我在max-width: 980px上添加了display: none到answear__avatar，之後那些div彼此重疊。我如何阻止它們重疊？

這裏是我的代碼：

.answear__wraper { 
 
    margin-bottom: 10px; } 
 

 
.answear__answear, .answear__answear--dissucsion { 
 
    position: relative; 
 
    height: 100%; } 
 

 
.answear__answear { 
 
    width: 100%; } 
 

 
.answear__answear--dissucsion { 
 
    width: 89.4%; 
 
    float: right; 
 
} 
 

 
    @media screen and (max-width: 980px) { 
 
    .answear__answear--dissucsion { 
 
     width: 95%; } } 
 

 
.answear__avatar { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100%; 
 
    } 
 
    @media screen and (max-width: 980px) { 
 
    .answear__avatar { 
 
     display: none; } } 
 

 
.answear__content { 
 
    text-align: left; 
 
    position: absolute; 
 
    }

<div class="answear_container"> 
 
    <div class="answear__wraper"> 
 
     <div class="answear__answear"> 
 
      <div class="answear__avatar"><img src="images/user0.jpg" class="image__lg" /></div> 
 
      <div class="answear__content"> 
 
       <div class="answear__user"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="answear__answear--dissucsion"> 
 
      <div class="answear__avatar"><img src="images/user0.jpg" class="image__lg" /></div> 
 
      <div class="answear__content"> 
 
       <div class="answear__user"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

使用visibility: hidden;元素仍將像以前一樣佔用相同的空間。該元素將被隱藏，但仍會影響佈局。

通過使用display: none;將顯示該頁面，就好像元素不存在一樣。