1

我正在尝试设置文本块的样式，使其在每一侧都被一个大花括号包围（这样每个大括号都占据了元素每一侧的整个高度）。这是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 标记。

4

4 回答 4

2

删除 <span> 和 <p> 标签。将开始 <blockquote> 标记编辑为
<blockquote class="addCurlys">。使用这个 CSS（使用 :before 和 :after 伪元素的字体大小）：

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

因为 em 是 :before 和 :after 伪元素的度量单位，所以它们链接到其父元素的字体大小 - 块引用本身。

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

于 2014-03-09T03:26:19.987 回答
0

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

你可能可以做类似的事情

<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:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
于 2013-03-22T21:50:41.710 回答
0

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

考虑这段代码（或测试小提琴）：

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属性，以便可以相对于它定位之前和之后的块。我们给:beforea并position: absolute给它一个0 值，以便它与块引用的顶部和底部边缘对齐。然后我们给它一个，让它一直被推到边缘的左边（如果你想在块引用中使用它，可以根据你的口味调整）。和我们喜欢的。topbottomright: 100%left:0width

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

根据您的需要进行调整。

于 2013-03-22T22:56:20.410 回答
0 
<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>
于 2013-03-22T21:54:37.137 回答