• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

在评论部分正确排列文字

JavaScript 来源:droidev 8次浏览

我需要一个图中所示的排列,因为我无法发布图像请点击this link。在评论部分正确排列文字

因为我已经编码为相同如下

HTML

<div class="container"> 
       <div class="test-item"> 
        <span class="test-head"> 
         <img src="images/testimonial_item.png" class="img-responsive" /> 
        </span> 
        <p class="test-quote"> 
         Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus erat porttitor. 
         <span class="test-author" > 
          Lorem Ipsum 
         </span> 
         <br /> 
         <span class="test-author-org"> 
          lorem 
         </span> 
        </p> 
       </div> 
       </div> 

CSS

.testimonial 
    { 
     background: #fff; 
     padding:60px 0px !important; 
     position:relative; 
    } 
    .test-head { 
     float: left; 
      width: 10% !important; 
    } 
    .test-head img 
    { 
     height:80px; 
     width:auto; 
     } 
     .test-author-org,.test-author 
     { 
      float:right; 
      padding:0; 
      margin:0; 
      color:#626262; 
      } 
      .testimonial p 
      { 
       padding-right:70px !important; 
       } 
    .test-item 
    { 
     background:#e6e6e6; 
     border-radius:70px; 
     min-height:81px; 
    } 
.testimonial .test-quote 
{ 
    display: block; 
    font-family: Arial; 
    font-size: 14px; 
    color: #0a3980; 
    text-align: left; 
    padding:10px 0 0 0 ; 
    margin-bottom:0px!important; 
    clear:right; 
} 

fiddled here

怎么能我把它确切的图像?

请帮助任何人

===========解决方案如下:

从头开始,下面会产生你在找什么。

注意如果您的报价将小于650px,您可能需要调整边距,填充和/或宽度,以便内容不会溢出容器。

See a working jsFiddle here


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)