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

定位span项目以包装文本块

1 个答案: