Question

我尝试了多项内容但未将<img>置于所需位置。它总是卡在两个跨度之间。尝试img out the child div并将其添加到父div。但没有运气。我希望将它放在我的跨度下面并使用padding-top:20px;。此图像是200x38像素。这是我的代码：

HTML

<div class="col1-step2">
          <div class="heading-step2">
            <span class="heading-step2">Hello signed User.</span>
            <span class="heading-step2 textblue">How are you doing.</span>
            <img class="user-bar" src="<?php echo site_url('img/bar.png'); ?>">
          </div>
</div>

CSS

.col1-step2 {
  float: left;
  width: 40%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);

}
div.heading-step2 {
  top: 6%;
  position: relative;
}

.heading-step2 {
  font-size: 24px;
  color: #f7f7f7;
}
.heading-step2 .textblue {
  color: #55c7fa;
  font-weight: bold; 
  display: block;
}
img.user-bar {
  position: absolute;
  padding-top: 25%;
}

Answer 1

你有相对和绝对定位的组合。通过删除图像上的绝对定位并重构HTML，您可以获得不同的元素排序：

http://jsfiddle.net/HhbQB/1/

<div class="col1-step2">
    <div class="heading-step2">
        <span class="heading-step2">Hello signed User.</span>
        <img class="user-bar" src="http://placehold.it/200x100" />
        <span class="heading-step2 textblue">How are you doing.</span>    
    </div>
</div>

根据您的评论更新了小提琴：http://jsfiddle.net/HhbQB/2/

Answer 2

你可以给你的div提供相对或绝对的位置，如果你需要帮助，那么尝试给你想要div的位置。

定位<img/>元素

2 个答案: