将div一个水平地堆叠在另一个下面

Question

在固定宽度的父div中水平地将div一个堆叠在另一个下面，所有子div应该以流畅的方式放置。

.parent {
  width: 200px;
  height: 52px;
  border: 1px solid red
}

.child {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

我需要使用CSS修复但不使用JS，这是我需要的：

Answer 1

这是一个使用flex和绝对位置的解决方案：

.parent {
  width: 200px;
  height: 52px;
  border: 1px solid red;
  display:flex;
  flex-wrap:nowrap;
  padding: 0 25px;
  justify-content:space-around;
  box-sizing:border-box;
}

.child {
  position:relative;
  height:100%;
  max-width:0px;
  margin:auto;
}
.child:first-child {
  margin-left:0;
}
.child:last-child {
  margin-right:0;
}
.child:before {
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:-25px;
  bottom:0;
  border: 1px solid #000;
  border-radius: 50%;
  background-color: #fff;
  box-sizing:border-box;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>

Answer 2

以下示例使用jQuery。使用absolute定位和计算left偏移量。

＆＃13;

＆＃13;

const parentNode = $('.parent');
const childNodes = parentNode.find('.child');
const childNodeWidth = childNodes.outerWidth();
const childOffset = (parentNode.width() - childNodeWidth) / (childNodes.length - 1) / parentNode.width() * 100;
let zIndex = 0;

for (var i = 0; i < childNodes.length; i++) {
  childNodes.eq(i).css({
    left: i * childOffset + '%',
    backgroundColor: 'rgb(0, ' + parseInt(i * 255 / childNodes.length) + ', 255)',
    zIndex: zIndex++
  });
}

＆＃13;

.parent {
  width: 200px;
  height: 52px;
  border: 1px solid red;
  position: relative;
}

.child {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff;
}

＆＃13;

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle example