Question

这是我的以下代码：

＆＃13;

<div class="coupon-price">
  <div class="">
    <span class="coupon-new-price"> 65.000</span>
  </div>
  <div class="">
    <span class="coupon-old-price"> 130.000</span>
  </div>
  <div class="disc" style="width:31px;height:31px;position: absolute;float:right;right:6px;z-index:10000;background: red;color:white;border-radius: 70px;line-height:31px;text-align:center;font-size:10px;">
    50%
  </div>
</div>

＆＃13;

我的问题是如何让红色圆圈与价格平行？

Answer 1

我修改了你的代码，使光盘与价格平行。如果有帮助，请告诉我。

＆＃13;

<div class="coupon-price">
	<div class="">
         <span class="coupon-new-price"> 65.000</span>
    </div>
    <div class="">
         <span class="coupon-old-price"> 130.000</span>
    </div>
									
   <div class="disc" style="width:31px;height:31px;position: absolute;float:right;right:6px;z-index:10000;background: red;color:white;border-radius: 70px;line-height:31px;text-align:center;font-size:10px; top: 5px">
					
         50%					
   </div>
									
   </div>

＆＃13;

Answer 2

如果我理解你正确地看到下面的代码，它可能对你有帮助。

<div class="coupon-price">
    <div class=""> <span class="coupon-new-price"> 65.000</span> </div>
    <div class="" style="position: relative;"> <span class="coupon-old-price"> 130.000</span>
        <div class="disc" style="width:31px;height:31px;position: absolute;float:right;right:6px;z-index:10000;background: red;color:white;border-radius: 70px;line-height:31px;text-align:center;font-size:10px; top:0;"> 50% </div>
    </div>
</div>

Answer 3

你想要这样的东西：

<强> HTML

  <div class="coupon-price" style="position: relative;padding-right:50px;">
    <div class="">
         <span class="coupon-new-price"> 65.000</span>
    </div>
    <div class="">
         <span class="coupon-old-price"> 130.000</span>
    </div>

   <div class="disc" style="width:31px;height:31px;position: absolute;right:6px;z-index:10000;background: red;color:white;border-radius: 70px;line-height:31px;text-align:center;font-size:10px;top:0;bottom:0;margin:auto;">

         50%                    
   </div>

   </div>

Answer 4

Fiddle

Source

如果你打算对一个元素使用绝对位置，在使用之前要先理解它，阅读更多信息来源并检查所需的o / p的小提琴。

.coupon-price {
  float:left;
  position:relative;
}
.coupon-price:after {
  clear:left
}
.disc {
  position:absolute;
  top:0px;
  right:-50px;
  width:50px;
  height:50px;
  line-height:50px;
  border-radius:50%;
  background-color:#f00;
  text-align:center;
}

Answer 5

检查以下代码段

.disc {
  width: 31px;
  height: 31px;
  position: absolute;
  right: 0;
  top:10px;
  z-index: 10000;
  background: red;
  color: white;
  border-radius: 70px;
  line-height: 31px;
  text-align: center;
  font-size: 10px;
}

.coupon-price {
  position: relative;
  border: 1px solid
}

.price * {
  display: block;
}

.price {
  padding: 10px;
}

<div class="coupon-price">
  <div class="price">
    <span class="coupon-new-price"> 65.000</span>

    <span class="coupon-old-price"> 130.000</span>
  </div>

  <div class="disc" style="">

    50%
  </div>

</div>

希望这有帮助

Answer 6

对于绝对位置，您应该有一个相对父级的位置。我还将padding-right:50px设置为父div，以提供显示红色圆圈的空间。

注意：如果您想在页面右侧看到红色圆圈，请从主div中删除display: inline-block;。

<p>test</p>

<div class="coupon-price" style="position:relative; border:1px solid silver; display: inline-block; padding-right:50px">
	<div class="">
         <span class="coupon-new-price"> 65.000</span>
  </div>
  <div class="">
    <span class="coupon-old-price"> 130.000</span>
  </div>
	
  <div class="disc" style="position: absolute; right:6px; top:3px; width:31px; height:31px; z-index:1000; background: red; color:white; border-radius: 70px; line-height:31px; text-align:center; font-size:10px; "> 50%	
 </div>

</div>

如何立即制作浮动内容？

6 个答案: