如何为 css 中具有绝对位置的兄弟 div 元素的 margin-left 设置动态数字

Question

从下面我的 CSS 中的 .half-circle:nth-child class 定义可以看出，我试图为每个绝对定位的 <div> 相同 class，但我无法让它工作。

.header-paymentback-panel{
position: relative; 
float: left;
width: 225px;
height: 150px;
background: #f5f5f5;
border: 2px solid #eaeaea;
border-radius: 5px;
display: inline-block;
}

.half-circle {
position: absolute;
bottom: -2px;
float: left;
width: 45px;
height: 30px;
background-color: #fff;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border: 2px solid #eaeaea;
border-bottom: 0;
}

.half-circle:nth-child(n) {
 margin-left: /* (20px * item index) */
}

HTML:

<div class="header-paymentback-panel">

<div class="half-circle"></div>
<div class="half-circle"></div>
<div class="half-circle"></div>

</div>

感谢您的帮助。

Answer 1

您可以向 .half-circle 个元素添加父元素。

例如。 .half-circle-container 并给它 position: absolute;

然后用display: inline-block;

添加.half-circle个元素

之后您可以根据需要为.half-circle设置margin-left。请参阅下面的代码：

.header-paymentback-panel {
  position: relative;
  float: left;
  width: 225px;
  height: 150px;
  background: #f5f5f5;
  border: 2px solid #eaeaea;
  border-radius: 5px;
  display: inline-block;
}

.half-circle-container {
  position: absolute;
  bottom: -2px;
  left: 0;
}

.half-circle {
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 30px;
  background-color: #fff;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border: 2px solid #eaeaea;
  border-bottom: 0;
  margin-left: 20px; //Change here
}

<div class="header-paymentback-panel">
  <div class="half-circle-container">
    <div class="half-circle"></div>
    <div class="half-circle"></div>
    <div class="half-circle"></div>
  </div>
</div>

Answer 2

无需任何额外元素，您可以使用多个背景，包括圆圈和 linear-gradient 的 radial-gradient ] 对于边框 - 请参阅下面的演示：

div {
  width: 225px;
  height: 150px;
  background: radial-gradient(circle at bottom, #fff 20px, #eaeaea 21px, transparent 23px) bottom left / 33.33% 25px repeat-x, /* circles repeating horizontally */
              linear-gradient(#eaeaea, #eaeaea) left / 2px 100% no-repeat, /* left border */
              linear-gradient(#eaeaea, #eaeaea) right / 2px 100% no-repeat,  /* right border */
              linear-gradient(#eaeaea, #eaeaea) bottom / 100% 2px no-repeat,  /* bottom border */
              linear-gradient(#eaeaea, #eaeaea) top / 100% 2px no-repeat,  /* top border */
             #f5f5f5 /* this color fills other areas */;
  border-radius: 5px;

}

<div></div>

如何为 css 中具有绝对位置的兄弟 div 元素的 margin-left 设置动态数字

How to set dynamic number for margin-left of sibling div element with absolute position in css

html

css

margin

css-position