html - 我想定位我的 :after content in mobile view or in less resolutions

Question

我有用于证明的 HTML 和 CSS，在 JSFIDDLE DEMO 中.这里的问题是“:after”内容在移动 View 中放错位置或者没有正确对齐，我需要对齐它，以便它在移动 View 和普通 View 中都需要处于恒定位置，任何人都有一些想法？

 <div>
 <div class="testi-inno" id="testi-one">

<p>“this place having some text, which is of lorger or amaller size”</p>
</div>
</div>

<div class="testi-img" style="clear:both;">
<img src="" alt=" " width="70" height="70"/>
 </div>
<p class="testi-par">name of client</p>
<p class="testi-paras">designation</p>
  </div>

CSS:

.testi-inno p:after {
   content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-top: 20px solid #fff;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  top: 19%;
  left: 42%;

}
.testi-inno{
background:#fff;
margin:10px;
box-shadow: 10px 10px 5px #888888;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
border-radius: 10px; 
}
.testi-inno p{
margin:15px;
margin-bottom:15px !important;
  padding-top: 10%;
  padding-bottom: 10%;

}
.testi-img img{
 background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-top: 7%;
    margin-left: 34%;
}

JSFIDDLE DEMO

Answer 1

简单的解决方案，只需在“.testi-inno”中使用 Position Relative 因为 Position:relative 控制 Position:absolute

 .testi-inno{
    background:#fff;
    margin:10px;
    box-shadow: 10px 10px 5px #888888;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
  }

在你的情况下，你的后值(value) = top: 19%;或离开:42%；根据 Window Walls 工作，但是在你使用 Position:relative 之后，然后 top :19% or left :42% 根据你的 .testi-inno Div 工作，所以它在移动设备上正常工作。第二个错误是如果你需要使箭头居中使用 left : 50%;不是 42%。

 .testi-inno p:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-top: 20px solid #fff;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    bottom: 0%;
    left: 50%;
    margin:0 0 0 -20px;
 }

只需检查我的 JSFIDDLE DEMO -