如何有效地浮动图像或背景图像

Question

我需要动态显示2个代表开始和结束引号的图形图像文件，如下面的示例屏幕截图所示。

引号需要出现在上部内容块的左侧和右侧，如图所示。内容块宽度会因页面而异。

我尝试了浮动和背景图像。有没有人有正确，动态和灵活地定位2个图像文件的提示或技巧？

这是我在使用@Utkanos回答后到目前为止所得到的：

HTML

<div class="postsPage_item_content postsPage_item_quote"><?php the_content();?></div>

CSS

div#maincontentcontainer div#primary div div.postsPage_item_content {
  position: relative;
  text-align: center;
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::before, div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
  background-image: url('../images/QUOTE1.png');
  content: '';
  display: block;
  left: 20%;
  height: 28px; /* background-image natural height is 28px */
  position: absolute;
  top: calc(50% - 50px);
  width: 36px; /* background-image natural width is 36px */
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
  background-image: url('../images/QUOTE2.png');
  left: auto;
  right: 20%;
}

显示

期望的结果是（1）每个动态呈现的引号与内容块的顶部对齐，以及（2）引号动态地定位内容块的左侧和右侧的边距填充，如红色所示箭头。

Answer 1

伪元素非常适合这类事情。

HTML：

<div id='my_div'>
    <p>Content here.</p>
    <p>Etc.</p>
</div>

CSS：

#my_div {
    position: relative;
}
#my_div::before, #my_div::after {
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    display: block;
    background: url('path/to/open_quote_img.png');
    left: 5%;
    top: calc(50% - 25px);
}
#my_div::after {
    background: url('path/to/close_quote_img.png');
    left: auto;
    right: 5%;
}

该代码假设您的报价图形的宽度和高度为50px - 根据需要进行修改。

最后，为了确保您的内容不会覆盖引用图片，请在容器上设置适当的padding-left和padding-right（在我的示例中为div），以便内容为充分推开它们。

Answer 2

另一种可能性是在absolute容器内使用relative定位。例如：

.container { width:300px; position:relative;padding:20px}
    .left-quote {position:absolute; top:10px; left:10px; font-size:30px;}
    .right-quote {position:absolute; bottom:20px; right:10px; font-size:30px;}

<div class="container">
      <span class="left-quote">"</span>
      <span class="right-quote">"</span>
      <p>is one of the smartest and most dedicated people that I know... he helped the company achieve incredible share of voice in key publications such as...</p>
    </div>