0

我有用于推荐的 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”&lt;/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 演示

4

2 回答 2

0

简单的解决方案，只需在“.testi-inno”中使用位置相对位置，因为位置：相对控制位置：绝对

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

在您的情况下，您的后价值 = 最高：19%；或离开：42%；根据 Window Walls 工作，但是在使用 Position:relative 之后，top :19% 或 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 -

于 2015-06-25T06:28:53.423 回答
0

只需更改.testi-inno p:afterto.testi-inno:after和top: 19%;to margin-top: -15px;。_

这是JsFiddle 链接。

例如

调整

.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%;
}

希望能帮助到你。

于 2015-06-25T06:42:49.077 回答