设置显示后，Div重叠：没有一个元素

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

使用ID=3元素仍将占用与之前相同的空间。该元素将被隐藏，但仍会影响布局。

通过使用visibility: hidden;，页面将显示为元素不存在。