在評論部分正確排列文字

Question

我需要一個圖中所示的排列，因爲我無法發佈圖像請點擊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

怎麼能我把它確切的圖像？

請幫助任何人

Answer 1

從頭開始，下面會產生你在找什麼。

注意如果您的報價將小於650px，您可能需要調整邊距，填充和/或寬度，以便內容不會溢出容器。

See a working jsFiddle here

.my-head{ 
 
    width:61px; 
 
    float:left; 
 
} 
 
.my-body{ 
 
    padding-top:15px; 
 
    width:auto; 
 
    max-width:90%; 
 
    float:left; 
 
} 
 

 
.my-quote-container { 
 
    font-family: Arial; 
 
    font-size: 14px; 
 
    color: #0a3980; 
 
    text-align: left; 
 
    margin-bottom: 0px!important; 
 
    background: #e6e6e6; 
 
    border-radius: 70px; 
 
    min-height: 81px; 
 
    clear:both; 
 
    
 
} 
 
.my-head-img{ 
 
    float:left; 
 
    transform: rotate(270deg); 
 
    margin: 8px 8px 8px 15px; 
 
    margin-right:25px; 
 
} 
 
.my-quote{ 
 
    text-align: left; 
 
    display:table; 
 
    padding-right:35px; 
 
    padding-left:35px; 
 
    float:left; 
 
} 
 
.my-body span{ 
 
    clear: right; float: right; 
 
    padding-right:42px; 
 
    color:#666666; 
 
} 
 
} 
 
.my-author{ 
 
    text-transform: uppercase; 
 
    margin-top:5px; 
 
}

<div class="my-quote-container"> 
 
    <div class="my-item"> 
 
    <div class="my-head"> <img src="http://s6.postimg.org/qara2aba5/testimonial_item.png" class="img-responsive my-head-img" /> </div> 
 
    <div class="my-body"> 
 
     <div class="my-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.</div> 
 
     <br> 
 
     <span class="my-author cap">Lorem Ipsum</span> <br /> 
 
     <span class="my-author">lorem</span> </div> 
 
    </div> 
 
</div>

Answer 2

增加了旋轉和填充PLZ點擊這裏：https://jsfiddle.net/bzz06r96/1/

.test-head img { 
     height:80px; 
     width:auto; 
    -ms-transform: rotate(-90deg); /* IE 9 */ 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ 
    transform: rotate(-90deg); 
    } 
.test-quote { 
    padding-left: 90px; 
    padding-top: 10px; 
    position: relative; 
    padding-right: 34px; 
}