javascript - CSS 将 div 放在绝对 div 下

Question

编辑:这是实时网站:https://snidel.com/Form/Product/ProductDetail.aspx?shop=0&pid=SWFS195138&vid=&bid=SND01&cat=SKE001&swrd=

我试图将这个绿色框 div 放在 div 下。我不知道为什么它会在中间，看起来像

我想要完成的是像

下面是代码

<div class="block-btn">
  <div class="btn secondary store">
    <a href="" onclick="javascript:show_popup_window('/Form/Product/RealShopProductStockList.aspx?pid=SWFS195138&amp;vid=SWFS19513800321000', 630, 900, true, true, 'ProductRealShopStockList');return false;">
      <span class="ico"><img src="/Contents/ImagesPkg/common/ico_detail_store_01.svg" alt="" class="svg"></span>店舗在庫
    </a>
  </div>

  <div style="position: absolute;top: 34%;right:0;">
    <p style="font-size: 16px;display: inline-block;letter-spacing: 0.08em;font-weight: 400;font-family: futura-pt;">TOTAL

      <img src="/Contents/ImagesPkg/snidel/common/ico_favorite_02.svg" width="20" style="padding: 0 3px;">
      33

    </p>
  </div>
  <div id="greenbox" style="  
  display: block;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;">
  </div>
</div>

我不能改变前一个div的样式，我只能编辑绿框div下的样式。我尝试调整位置和显示，但都不起作用。

Answer 1

DIV <div id="greenbox"></div></div>没有正确关闭。

请使用下面的代码。您将得到绿色框。

#greenbox{ background:green; padding: 10px; clear:both;}
.store{width:50%; float:left;}

<div class="block-btn">
  <div class="btn secondary store">
    <span class="ico"><img src="/Contents/ImagesPkg/common/ico_detail_store_01.svg" alt="" class="svg"></span>店舗在庫
    </div>

    <p style="margin:0;float:right;font-size: 16px;font-weight: 400;font-family: futura-pt;">TOTAL
      <img src="/Contents/ImagesPkg/snidel/common/ico_favorite_02.svg" width="20" style="padding: 0 3 px;">33
      </p>
    </div>

  <div id="greenbox"></div