我想将我的 :after 内容定位在移动视图或更低的分辨率中

Question

我有 HTML 和 CSS 的证明书，在 JSFIDDLE DEMO 中。这里的问题是“:after”内容在移动视图中错位或未正确对齐，我需要对齐它，以便它在移动视图和普通视图中都需要处于恒定位置，有人有什么想法吗？

 <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:absolute

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

在你的情况下你的后价值= 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 -

Answer 2

只需将 .testi-inno p:after 更改为 .testi-inno:after 并将 top: 19%; 更改为 margin-top: -15px;。

这是JsFiddle Link.

例如

修改

.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: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;
  margin-top: -15px;
  left: 48%;
}

希望对您有所帮助。

我想将我的 :after 内容定位在移动视图或更低的分辨率中

i want to position my :after content in mobile view or in less resolutions

html

css

testimonials