Question

有人可以告诉我这里我做错了什么吗？我所拥有的是报价图片。我想在这些引号之间包装文本。公开报价很好并且显示正确。图像位于左上方，文本环绕并位于其下方。但结束报价将无法正确呈现。它低于段落标记。

由于

      <div id="box1">
        <div class="info">adfda</div>
        <div class="post">
          <img style="float:left" src="quotes-open.jpg" alt="" />
          <p>lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl</p>
          <img style="float:right" src="quotes-close.jpg" alt="" />
        </div>
      </div>

.post p {
  line-height: 1.2em;
  margin: 0 0 20px 0;

}

任何??

Answer 1

首先，如果是引用，请使用<blockquote>元素。如果你绝对想要两个引号，你可以引用一个引用blockquote的背景图像，另一个引用所包含的<p>元素的背景图像。使用正确的填充，这应该可以正常工作。

Answer 2

你可以将尾随的关闭报价图像移动到<p>内部的某个位置（但是你必须使用它的位置;安全下注距离结尾约10-15个字。最后一句）所以从你的例子中你会得到：

<div id="box1">
    <div class="info">adfda</div>
    <div class="post">
        <img style="float:left" src="quotes-open.jpg" alt="" />
        <p>lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj 
           asg hagl lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl
           <img style="float:right" src="quotes-close.jpg" alt="" />
           lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl
        </p>
    </div>
</div>

我认为你会有更好的运气，就像斯蒂芬建议的那样：

<强> HTML：

<div>
  <div class="info">adfda</div>
  <div class="post">
    <blockquote>
      <p class="closeq">lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl</p>
    </blockquote>  
  </div>
</div>

<强> CSS

.post blockquote { background: url(quotes-open.jpg) no-repeat top left; /*padding*/ }
.post blockquote p.closeq { background: url(quotes-close.jpg) no-repeat bottom right; /*padding*/ }

备注

.post blockquote：将开场报价设置为背景并位于顶部和左侧。您需要在元素中添加一些填充，以便不占用文本或超出它。

.post blockquote p.closeq：我继续前进到你必须明确告诉你想要收尾报价的地方。这是因为您可能需要包含多个段落的引号。再次在这里，您将需要使用填充来确保您的文本不会在结束报价上运行。

Answer 3

<blockquote>
    <q>This is the quote</q>
    <q>This is another quote</q>
    <q>Etc...</q>
</blockquote>

blockquote {
    padding-bottom: 10px; 
    background: transparent url(end-quote.gif) no-repeat 100% 100%;
}

blockquote q:first-child {
    display: block;
    padding-top: 10px;
    background: transparent url(start-quote.gif) no-repeat 0 0;        
}

您也可以采用相反的方式，使用<blockquote>作为开头报价，q:last-child作为收盘价。

Answer 4

下面是因为p标签是块级元素。

尝试移动段落上方的图像，或将<P>标记设置为浮动，并为其设置固定宽度。

Answer 5

<blockquote>
     <p>This is the quote</p>
     <p class="last-child">This is the last paragraph</p>
</blockquote>

blockquote { 
   background:url(./quote-open.gif) no-repeat top left; 
   padding:10px 0 10px 30px;
}

blockquote p {
   padding:0 30px 0 0;
}

blockquote p:last-child, blockquote p.last-child { 
   background:url(./quote-close.gif) no-repeat bottom right;
}`

使用填充物来使它看起来像你想要的那样。

有很多方法可以做到这一点...搜索Google并进行探索。这是一个包含大量示例的链接，使用Firebug检查您喜欢的内容，看看他们是如何做到的：http://www.smileycat.com/design_elements/pull_quotes/

Answer 6

一个简单的解决方案：

<!-- HTML: -->
<blockquote><div>
Your text
</div>
</blockquote>

/* CSS: */
blockquote {
  background: url('link-to-open-quote.gif') left top;
}

blockquote div {
  background: url('link-to-closing-quote.gif') right bottom;
  padding-bottom: 40px; /* To prevent the text from flowing over the quote */
}

如何将图像左上角和右下角

}

6 个答案: