尝试左浮动左弯引号但遇到一些问题

发布于 2024-08-08 07:52:10 字数 582 浏览 1 评论 0原文

我试图浮动一个大的左弯引号，以便块引号位于它的左侧。不过我有几个问题。

1) 即使我声明了clear: right;，p 标签中的文本仍继续环绕引号符号。在块引用上。我从来不明白浮动应该如何工作，所以有人可以提供一些关于如何让它工作的建议吗？

2）忽略上面的问题，里面的文本与引号本身的顶部不对齐，但是当我将 margin-top 应用于块引用时，它根本不移动。建议？

我知道我可以通过在块引用上使用引号符号的背景图像来解决这个问题，但我想用文本来解决这个问题。

HTML：

<div class="quote_symbol">&ldquo;</div>

<blockquote>To be or not to be</blockquote>

<p>Some other text on the page below</p>

CSS：

.quote_symbol{font-size: 4.5em; float:left;}
blockquote{clear:right;}

原文

I'm trying to float a large left curly quote so that the blockquote sits just to the left of it. I'm having a couple of issues though.

1) The text in the p tag continues to wrap around the quote symbol even though I declare clear: right; on the blockquote. I have never understood how floats are supposed to work so can someone offer some suggestions on how to get this to work?

2) Disregarding the issue above, the text inside doesn't line up with the top of the quote symbol itself however when I apply margin-top to the blockquote, it doesn't move at all. Suggestions?

I know I could solve this by using a background image of a quote symbol on the blockquote but I would like to do this with text.

HTML:

<div class="quote_symbol">“</div>

<blockquote>To be or not to be</blockquote>

<p>Some other text on the page below</p>

CSS:

.quote_symbol{font-size: 4.5em; float:left;}
blockquote{clear:right;}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怀中猫帐中妖 2024-08-15 07:52:10

假设您希望引号文本位于弯引号符号的右侧。将您的标记更改为：

<blockquote>
     <div class="quote_symbol">“</div>
     To be or not to be
</blockquote>

<p>Some other text on the page below</p>

将 CSS 更改为：

blockquote              { position: relative; padding-left: 4.6em; }
blockquote.quote_symbol { position: absolute; top: 0; left: 0;
                          font-size: 4.5em; }

或类似的内容怎么样？

Presuming you want the quote text to sit just to the right of the curly quote symbol. What about changing your markup to:

<blockquote>
     <div class="quote_symbol">“</div>
     To be or not to be
</blockquote>

<p>Some other text on the page below</p>

And your CSS to:

blockquote              { position: relative; padding-left: 4.6em; }
blockquote.quote_symbol { position: absolute; top: 0; left: 0;
                          font-size: 4.5em; }

Or something similar?

回复收藏 0 原文