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

Question

我创建了一个小例子：jsfiddle

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

text-height 稍后应进行动画处理

（编辑：澄清一下，每个 .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>

标签： htmlcss

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/