html - 如何将父级的父级宽度应用于相对定位的子级 div？

Question

我创建了一个小例子:jsfiddle

当鼠标悬停在其中一个红色框上时，我希望文本填充完整的“行”宽度，从父 div 的左边框开始，所有框看起来都一样。

文本高度稍后应该是动画的

(编辑:澄清一下，每个 .ma-text 的宽度应为 .contentaround，每行的第一行已经具有正确的宽度和位置)

.contentaround{
  max-width: 80%;
  border:1px solid black;
}
.ma{
  min-height: 20px;
  margin: 0px;
  text-align: center;
  border: 2px solid red;
  display: inline-block;
  width:23%;
}

.ma-text{
  min-width: 100%;
  width: 65vw;
  max-width: 1050px;
  text-align: left;
  height: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  box-sizing: border-box;
  float:left;
}
.ma:hover .ma-text{
  height: auto;
  visibility: visible;
  opacity: 1;
  display: block;
}

<div class="contentaround">
  <div class="ma ">
  <div class="ma-icon">x</div>
  <div class="ma-text">
    <p>
      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </p>
  </div>
</div>
  <div class="ma ">
  <div class="ma-icon">x</div>
  <div class="ma-text">
    <p>
      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </p>
  </div>
</div>
  <div class="ma ">
  <div class="ma-icon">x</div>
  <div class="ma-text">
    <p>
      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </p>
  </div>
</div>
  <div class="ma ">
  <div class="ma-icon">x</div>
  <div class="ma-text">
    <p>
      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </p>
  </div>
</div>
<div class="ma ">
  <div class="ma-icon">x</div>
  <div class="ma-text">
    <p>
      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </p>
  </div>
</div>
</div>

Answer 1

如果父元素有相对位置，子元素只需要width: 100%就有父元素的宽度。

.contentaround{
  max-width: 80%;
}
.ma{
  min-height: 20px;
  margin: 0px;
  text-align: center;
  border: 2px solid red;
  display: inline-block;
  width:23%;
}

.ma-text{
  min-width: 100%;
  width: 65vw;
  max-width: 1050px;
  text-align: left;
  height: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  box-sizing: border-box;
  float:left;
}
.ma:hover .ma-text{
  height: auto;
  width: 100%;
  visibility: visible;
  opacity: 1;
  display: block;
}

<div class="contentaround">
  <div class="ma ">
  <div class="ma-icon">x</div>
  <div class="ma-text">
    <p>
      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </p>
  </div>
</div>
<div class="ma ">
  <div class="ma-icon">x</div>
  <div class="ma-text">
    <p>
      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </p>
  </div>
</div>
</div>

JSFiddle:https://jsfiddle.net/vdoLw0yu/25/