Question

我正在尝试设置一个文本块，以便它在每一侧都被一个大的花括号包围（这样每个支撑占据了元素每一侧的整个高度）。这是HTML：

<blockquote>
<span class="braceleft">&#123;</span>
<p class="quotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus           Pellentesque at neque lorem, vitae aliquet risus.</p>
<span class="braceright">&#125;</span></blockquote>

我还应该提一下，我正在尝试在WordPress中执行此操作，我知道可以添加不需要的标记。如果我能为纯HTML获得正确的CSS，我希望能够弄清楚如何去掉不需要的标签。

我可以轻松更改HTML标记，如果这样可以使样式更容易。

Answer 1

删除＆lt; span＆gt;和＆lt; p＆gt;标签。编辑开头＆lt; blockquote＆gt;标记为
＆lt; blockquote class =“addCurlys”＆gt;。使用此CSS（使用font-size表示：before和：after pseudoelements）：

blockquote  {
    font-size:1em;
}
blockquote.addCurlys:before {
    content: "{";
    font-size:10em;
}
blockquote.addCurlys:after {
    content: "}";
    font-size:10em;
}

因为em是：之前和之后的伪元素的度量单位，它们与父元素的字体大小相关联 - 即块引用本身。

我认为大多数浏览器现在支持:: for pseudoelements - 我仍然倾向于只使用一个

Answer 2

请注意，您应该限制内容以使其适合大括号。

您可以执行类似

的操作

<blockquote class="clearfix">
  <div class="curly-left float-left">
    <div class="float-left"> Content here </div>
  <div class="curly-right float-left">
</blockquote>

然后在CSS中设置左/右卷曲的高度/宽度和背景图像。浮动div并使用blockquote上的clearfix。

我认为应该这样做。

这是我用于clearfix的代码

/* Clearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Answer 3

<span class="braceleft" style="float:left; padding: 0 10px">&#123;</span>
<p class="quotation" style="float:left; padding: 0; margin: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus Pellentesque at neque lorem, vitae aliquet risus.</p>
<span class="braceright" style="float:left; padding: 0 10px">&#125;</span>

Answer 4

没有其他标签的方法是使用CSS的:before和:after创建2个大括号，然后相应地设置它们的样式。

考虑这段代码（或test the fiddle）：

HTML：

<blockquote class="addCurlys">I like curly <br> curls <br/><br/> I really do<br/><br/>I really really do</blockquote>

CSS：

BLOCKQUOTE.addCurlys {background: yellow; position: relative; padding: 0.5ex; 1em}
BLOCKQUOTE.addCurlys:before {
    content: ''; border: 1px dotted pink;
    position: absolute; right: 100%; top: 0; bottom: 0; width: 30px; 
    background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100%
}
BLOCKQUOTE.addCurlys:after {
    content: ''; border: 1px dotted pink;
    position: absolute; left: 100%; top: 0; bottom: 0; width: 30px;
    background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100%
}

以下是它的工作原理（对于左大括号）：:before创建一个伪元素。我们需要添加content属性，否则将无法“正确”呈现。粉红色的边框只在那里，所以你可以看到它的位置。

BLOCKQUOTE被赋予position: relative属性，以便可以相对于它定位前后块。我们给:before position: absolute并给它一个top和bottom值为0，以便它与blockquote的顶部和底部边缘对齐。然后我们给它一个right: 100%，以便它一直被推到边缘的左边（如果你想在块引用中使用left:0，可以调整你的口味）。我们喜欢width。

最后，我们添加一个背景（因为你想让卷曲垂直拉伸）图像，并指定我们希望它的大小是100％100％的容器（:before，即开口括号）。随意将小猫图像更改为花括号，我更喜欢小猫。

根据您的需求进行调整。

如何设置围绕它的大花括号的blockquote样式

4 个答案: