Question

我创建了一个小例子：jsfiddle

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

稍后应设置文本高度的动画

（编辑：为澄清起见，每个.ma文本的宽度应为.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/

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

1 个答案: