位置跨度項目以包裹文本塊

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