表示を設定した後にDivsが重なっています

Question

自分のプロジェクトのコメントセクションを作成しています。display: noneをanswear__avatarに追加してmax-width: 980pxに追加し、それらの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;を使用すると、その要素が存在しないかのようにページが表示されます。