Blockquotes显示在div之上

时间:2014-04-23 15:54:36

标签: css html

我在使用blockquote元素时遇到一些困难,要显示在我创建的div作为我的图像滑块之上。我已经包括一个小提琴,所以你可以看到我所看到的。

My demo

以下是代码:

<div>
    <div class="callbacks_container">
      <ul class="rslides" id="slider4">

        <li>
        <img src="http://www.pressrecord.com.au/wp-content/uploads/2013/02/example.png" alt="">
        <div id="main-body-wrapper"> 
                <p class="caption" style="position:absolute;">  
        <span class="captionspan">
        <blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
        <cite>Somebody famous</cite>
        </blockquote>   
        </span></p>
        </div>
        </li>

        <li>
        <img src="http://www.pressrecord.com.au/wp-content/uploads/2013/02/example.png" alt="">
        <div id="main-body-wrapper">
        <p class="caption" style="position:absolute;">
        <span class="captionspan"></span>
        </p>
        </div>
        </li>

        <li>
        <img src="img/nurseriesbig.jpg" alt="">
        <div id="main-body-wrapper">
        <p class="caption" style="position:absolute;">
        <span class="captionspan"></span>
        </p>
        </div>
        </li>

        <li><img src="http://www.pressrecord.com.au/wp-content/uploads/2013/02/example.png" alt="">
        <div id="main-body-wrapper">
        <p class="caption" style="position:absolute;">
        <span class="captionspan"></span>
        </p>
        </div>
        </li>

        </ul>
    </div>
 </div>  

1 个答案:

答案 0 :(得分:1)

此处小提琴http://jsfiddle.net/Anee/s673j/1/

将此添加到css:

 blockquote {
     position:absolute;
 }
 blockquote:after{
    content: "\201D";
    margin-right: -2.75em;
 }

不确定,为什么中间有p class caption。你可能想删除它。