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

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 像素 - 根据需要进行修改。

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

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>

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

How to effectively float an image or background image

css

image

css-position

background-image

css-float