位置跨度项目以包裹文本块

Question

我有一个小问题试图让一些报价坚持我的内容和正确包装，但与定位挣扎。

所以这里是一个演示：Fiddle Demo

现在有一个说法，为什么我不使用的mwethod，我发现这真的不稳定，这似乎是一个简单的解决方案。

.blockquote1 { 
    color: #009FFF; 
    font-weight: 400; 
    margin-top: 0px; 
    line-height: 150%; 
    font-size: 1.1em; 
} 

.quoteLeft{ 
    color: #009FFF; 
    font-size: 5em; 
    font-weight: 400; 
    font-family: 'News Cycle', sans-serif; 
    float: left; 
    padding: 0; 
    margin-right: 10px; 
    margin-top: -15px; 
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    -ms-transform: scale(-1, 1); 
    transform: scale(-1, 1); 
    -moz-transform:rotate(-180deg); 
    -webkit-transform:rotate(-180deg); 
    -o-transform:rotate(-180deg); 
    -ms-transform:rotate(-180deg);   
} 

.quoteRight{ 
    color: #009FFF; 
    font-size: 5em; 
    font-weight: 400; 
    font-family: 'News Cycle', sans-serif; 
} 

<span class="quoteLeft">"</span><span class="blockquote1">Mark  designed and produced our website for us by using the photos that I supplied him with and his own ingenuity. I am not the best photographer but mark used his magic hand to make them look as though they were professionally taken. Mark spent a great deal of time on the website to make sure that it looked professional and …would not make the website live until I was completely happy, I would recommend him to anyone wanting a well presented website.</span><span class="quoteRight">"</span> 

Answer 1

我已经解决了自己刚刚添加的绝对位置到第二块引用和一些保证金问题：

.quoteRight{ 
    color: #009FFF; 
    font-size: 5em; 
    font-weight: 400; 
    font-family: 'News Cycle', sans-serif; 
    position: absolute; 
    margin-top: 10px; 
    margin-left: 5px; 
}