如何从相对位置移除额外空间？

Question

我使用了position：relative将priceholder div移动到其初始位置之上，现在当我把另一个div放在它下面时就是描述div（你可以在我的jsfiddle上查看），你可以看到priceholder div仍然占据其初始位置的区域。

我的问题是如何删除这个额外的空间？我不想在我的描述div上使用另一个相对位置来修复它，因为它弄乱了我的布局。

<div class="frame">
        <div class="imageholder"><img src="http://i.imgur.com/daiSXVG.jpg"/></div>
        <div class="priceholder"><p>$ 456</p></div>
        <div class="description">This is a test description.</div>
    </div>

这是我的jsfiddle：http://jsfiddle.net/MarkTe/g6zs8qhx/2/

Answer 1

我稍微重新构建了一些结构，删除了一些（不必要的元素）

body {
  margin-top: 50px;
}
.frame {
  margin: 0 auto;
  padding: 6px;
  background: #fedd02;
  border-radius: 6px;
  width: 200px;
  height: 150px;
}
.frame img {
  max-width: 100%;
}
.priceholder {
  border: 1px solid black;
  border-radius: 50%;
  width: 74px;
  height: 74px;
  position: absolute;
  box-sizing: border-box;
  margin-left: -37px;
  margin-top: -43px;
  padding: 10px 0 0 10px;
}

<div class="frame">
  <p class="priceholder">$ 456</p>
  <img src="http://i.imgur.com/daiSXVG.jpg" />
  <p>This is a test description.</p>
</div>

或查看updated Fiddle。

修改

要在循环中添加它，您可以使用以下内容：

<?php
while( ...statement... ) {
     echo '<div class="frame">';
     echo '  <p class="priceholder">$ 456</p>';
     echo '  <img src="http://i.imgur.com/daiSXVG.jpg" />';
     echo '  <p>This is a test description.</p>';
     echo '</div>';
}
?>