0

嗨，大家好！我需要一些 CSS 帮助来设置我的块引用规则的样式。我想要的结果是在引用的文本上方有开始引号，在引用的文本下方有结束引号。

这张图片正是我所需要的——网站设计

这是我当前的实时 WIP 链接 -实时链接

我的 CSS：

blockquote {
color: #e33e00;
font-style: italic;
font-family: GeoSlb712XBdBT;
padding:20px;
padding-left: 15px;
border-left: 3px solid #F63;


}

blockquote p:before {
content: '"';
font-size: 30px;
top:20px;
position:absolute;

}

blockquote p:after {
content: '"';
font-size: 30px;
}

如果有人可以提供帮助，我将不胜感激。

4

2 回答 2

2

演示

查看我添加的代码（缩进 4 个空格）

您需要添加position: relative;到blockquote p，然后它是一些绝对定位，:before向上:after移动:before15px 和:after向下移动 30px。

调整右侧的大小以使报价扩大和缩小，并看到报价始终保持在顶部和底部

当然，您可以使用 20px 和 35px（或更多）来在引号和<p>被引用之间添加更多空间。

编辑：添加了下面的代码，解决问题的附加代码缩进了 8 个空格

blockquote {
    color: #e33e00;
    font-style: italic;
    font-family: GeoSlb712XBdBT;
    padding:20px;
    padding-left: 15px;
    border-left: 3px solid #F63;
}


        blockquote p { position: relative; }

blockquote p:before {
content: '"';
font-size: 30px;
position:absolute;
        top:-15px;
        left:0px;
}

blockquote p:after {
content: '"';
font-size: 30px;
        position:absolute;
        bottom:-30px;
        left:0px;
}

​</p>

于 2012-08-08T17:29:34.330 回答
0

像这样http://www.visibilityinherit.com/code/css-blockquotes-how-to.php。或者将显示内联块与另一个一起使用。我试图发布代码，但显然无法正确缩进。

于 2012-12-08T20:07:48.883 回答