Question

我连续有3个圆圈，我想用虚线在中心之间链接它们，这是类似于我想要的屏幕截图：

这是html代码：

<div class="container-fluid">
   <div class="row">
       <div class="col-xs-push-3 col-xs-6 text-center">
           <div class="col-xs-3">
               <div class="wrapper">
                   <span class="circle text-center">A</span> 
                   <span class="dash_line" style="transform: translate(232%, -215%);">---</span>
               </div> <!-- wrapper -->
           </div> <!-- col-xs-3 -->
           <div class="col-xs-6">
               <div class="wrapper">
                   <!--<span class="dash_line">---</span>-->
                   <span class="circle text-center">B</span> 
                   <!--<span class="dash_line">---</span>-->
               </div> <!-- wrapper -->
          </div> <!-- col-xs-6 -->
          <div class="col-xs-3">
              <div class="wrapper">
                  <span style="    transform: translate(-114%, 135%);" class="dash_line">-----</span>
                  <span class="circle text-center">C</span> 
              </div> <!-- wrapper -->   
          </div> <!-- col-xs-3 -->
        </div> <!-- col-xs-6 -->
    </div> <!-- row -->
</div> <!-- container-fluid -->

这是自定义CSS：

.row{
    margin:5% auto
}

.circle {
    border-radius: 50%;
    border: 1px solid #d1cfc8;
    background-color: #f7eebe;
    padding: 15% 35%;
    font-size: 300%;
    display: inline-block
}

.dash_line{
    position: absolute;
    transform: translateY(50%);
}

在这里看到它实况很简单： http://jsfiddle.net/mpvf5rxa/37

如您所见，我为每个虚线使用特定的值，我希望它是动态的。

我不介意更改元素，添加/删除元素。

我也不介意使用Javascript / Jquery实现这一目标。

Answer 1

编辑，因为您使用bootstrap 3，所以可以使用另一种使用伪和边距的方法：

.ABC {
  text-align: center;
}
.ABC span {
  padding: 1vw 2.8vw; /* any values of yours */
  font-size: 5vw; /* any values of yours */
  border: 1px solid; /* any values of yours */
  border-radius: 50%;
  display: inline-block;/* to trigger block formatting context .vertical padding + pseudo */
}
span + span /* filter out first span */{
  margin-left:5vw;/* equals width of dashed line */
}
span + span::before {/* do not draw anything from first span */
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin-left:-7.8vw;
  margin-right:2.8vw;/* equal span padding*/
  width:5vw;
  border-top:dashed;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row ABC">
    <span>A</span>
    <span>B</span>
    <span>C</span>
  </div>
</div>

最初的答案以为bootsrap 4参与其中。

如果只有3个元素用虚线分隔，则可以使用伪指令，命令，内置的bootsrap类和更少的标记：

在这里，我添加了ABC类以轻松选择此行，但是您可以使用任何其他类或ID。

.ABC span {
  padding:1vw 2.8vw;/* any values of yours */
  font-size:5vw;/* any values of yours */
  border:1px solid;/* any values of yours */
  border-radius:50%;
  order:0;/* defaut*/
}
.ABC span + span {
  order:2;/* leave order:1 for one pseudo */
}
.ABC span:last-of-type {
  order:4;/* leave order:3 for the other pseudo */
}
.ABC:before,
.ABC:after {
  content:'';
  width:5vw;/* whatever size you need */
  order:1;
  border-top:dashed;
}
.ABC:after {
  order:3;
}

.ABC:after {
  order: 3;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center align-items-center ABC">
    <span>A</span>
    <span>B</span>
    <span>C</span>
  </div>
</div>

Answer 2

我当然会考虑使用Grid或Flex。这是我使用flex构建的一个粗略示例，希望通过一些修改即可满足您的需求！

http://jsfiddle.net/kh2q6vo7/7/

.container {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
}

.a {
  width: 50px;
  height: 100px;
  margin-right: 10px;
  border: 1px solid red;
}

.b { 
  width: 75px;
  height: 60px;
  margin-right: 10px;
  border: 1px solid blue;
}

.c {
  width: 100px;
  height: 25px;
  border: 1px solid green;
}

.line--right {
  position: relative;
}

.line--right:after {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  background: black;
  position: absolute;
  right: -11px;
  top: 50%;
}

<div class="container">
  <div class="a line--right">A</div>
  <div class="b line--right">B</div>
  <div class="c">C</div>
</div>

您需要更改元素以满足您的需求。容器尺寸，线条尺寸，位置和形状都可能发生变化。等等... 但是使用 display：flex; ，您可以在容器内垂直居中放置元素。允许他们在中间配对！

更多参考文献：

https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/

如何从中心用虚线连接圆之间？

2 个答案: