Question

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

我正在尝试将该行设置为相对并将hr置于绝对位置，但结果表明效果不佳。

我不确定实施它的最佳方式是在响应中使用它

＆＃13;

.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;
  }

＆＃13;

<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>

＆＃13;

Answer 1

由于矩形的宽度各为33.3％，因此请添加ans = [[0,4,3,5,0], [2,1,3,5,5]] div given[given==4]=3 and so on.，并将其放在中间。（如果你不想要像素完美，那么50％顶部会做，因为线条将是1px）

position: absolute

width: 66.6%

Answer 2

<div class="container">
<div class="row">
<div class="col-xs-4">
  <div class="circle"></div>
  <div class="line"></div>
</div>
<div class="col-xs-4">
  <div class="circle"></div>
  <div class="line"></div>
</div>  
<div class="col-xs-4">
  <div class="circle"></div>
  <div class="line"></div>
</div>

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

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

 .col-xs-4 {
   position: relative;
 } 
 .line {
   position: absolute;
   top: 50%;
   width: 100%;
   border: 1px solid #000;
 }

添加连接所有div的行

2 个答案: