html - 添加一条连接所有 div 的线

Question

我有多个圆圈并试图用一条线连接所有圆圈 div。所以，它应该是连接第一和第二以及第二和第三的两条线。该线应与圆心对齐。

我试图使该行成为相对行，并在 hr 中放置一个绝对位置，但结果效果不佳。

我不确定实现它以响应式工作的最佳方式

.circle {
  width: 49%;
  padding-bottom: 49%;
  border-radius: 50%;
  background-color: purple;
  display: inline-block;
}

.container .row .col-xs-4 {
  padding-right: 0;
  padding-left:0;
  margin-left: 0;
  margin-right: 0;
  border: 1px solid black;
  text-align: center;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
     <div class="col-xs-4">
    <div class="circle"></div>
  </div>
  
  <div class="col-xs-4">
    <div class="circle"></div>
  
  </div>
  
  <div class="col-xs-4">
    <div class="circle"></div>
  
  </div>
  
    
  </div>
 
 
</div>

Answer 1

由于每个矩形的宽度为 33.3%，因此添加一个 position: absolute 和 width: 66.6% 的 div，并将其放在中间。 (如果你不想要像素完美，50% top 就可以了，因为线将是 1px)

.circle {
  width: 49%;
  padding-bottom: 49%;
  border-radius: 50%;
  background-color: purple;
  z-index: 2;
  position: relative;
  display: inline-block;
}

.container .row .col-xs-4 {
  padding-right: 0;
  padding-left:0;
  margin-left: 0;
  margin-right: 0;
  border: 1px solid black;
  text-align:center;
}

.container { position: relative; }
.line { 
  width: 66.6%; 
  height: 1px; 
  background: #000; 
  position: absolute; 
  top: 50%;
  left: 16.65%; /* Half the circle's width **/; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  
  <div class="row">
    <div class="col-xs-4">
      <div class="circle"></div>
    </div>
  
    <div class="col-xs-4">
      <div class="circle"></div>
    </div>
  
    <div class="col-xs-4">
      <div class="circle"></div>
    </div>
  
  </div>
  
  <div class="line"></div>
 
</div>