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

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%;
}

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

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

Answer 2

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

.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>