html - 设置显示: none of one of their elements后div重叠

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; 页面将显示为好像该元素不存在一样。