javascript - 合理安排推荐部分的文字

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

从头开始，下面将生成您要查找的内容。

请注意，如果您的报价小于 650 像素，您可能需要调整边距、填充和/或宽度，以免内容溢出容器。

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>