Question

我想在多个div之间添加一条垂直线，使其看起来像附加图像：

enter image description here 我试图通过添加div .border并将其位置设置为绝对来实现这一点。但是我想在边框之间添加一些边距，并使边框显示在框的后面，如上图所示。

这是我正在尝试的代码：

HTML：

<div class="wrap">

<div class="box">
    <div class="border"></div>
    <div class="figure"></div>  
    <div class="right"> right</div>    
</div>

<div class="box">
    <div class="border"></div>
    <div class="figure"></div>  
    <div class="right"> right</div>
</div>

<div class="box">
     <div class="border"></div>
    <div class="figure"></div>  
    <div class="right"> right</div>
</div>

</div>

CSS：

.wrap{
    position: relative;
    overflow: hidden;
}

.box{
    overflow: hidden;
    margin-top: 50px;   
}

.box:first-child{
    margin-top: 0;
}

.figure{
    width: 50px;
    height: 50px;
    background: yellow;
    display: inline-block;
    margin-right: 10px;
}

.right{
    display: inline-block;
}

.border{
  border-right: 3px solid red;
  height: 100%;
  left: 24px;
  position: absolute;
  top: 0;
  width: 1px;
}

.box:last-child .border{
    display: none;
}

的jsfiddle：

http://jsfiddle.net/w5TY9/

Answer 1

你走了。

<强> WORKING DEMO

HTML：

<div class="wrap">

<div class="box">
    <div class="border"></div>
    <div class="figure"></div>  
    <div class="right"> </div>    
</div>

<div class="box">
    <div class="border"></div>
    <div class="figure"></div>  
    <div class="right"> </div>
</div>

<div class="box">
     <div class="border"></div>
    <div class="figure"></div>  
    <div class="right"> </div>
</div>

</div>

CSS：

.wrap{
    position: relative;
    overflow: hidden;
}

.box{
    overflow: hidden;
    margin-top: 50px;   
}

.box:first-child{
    margin-top: 0;
}

.figure{
    width: 50px;
    height: 50px;
    background: yellow;
    display: inline-block;
    margin-right: 10px;
}

.right{
    display: inline-block;
}

.border {
    border-right: 3px solid #FF0000;
    height: 98%;
    left: 24px;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: -1;
}

.box:last-child .border{
    display: none;
}


.figure {
    background: none repeat scroll 0 0 #FFFF00;
    border-bottom: 12px solid #FFFFFF;
    border-top: 12px solid #FFFFFF;
    display: inline-block;
    height: 50px;
    margin-right: 10px;
    width: 50px;
}

CSS更改：

.border {
    border-right: 3px solid #FF0000;
    height: 98%;
    left: 24px;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: -1;
}

    .figure {
        background: none repeat scroll 0 0 #FFFF00;
        border-bottom: 12px solid #FFFFFF;
        border-top: 12px solid #FFFFFF;
        display: inline-block;
        height: 50px;
        margin-right: 10px;
        width: 50px;
    }

希望这有帮助。

Answer 2

.border{z-index: -1;} use this

请参阅链接http://jsfiddle.net/bipin_kumar/w5TY9/2/

Answer 3

.figure{
    width: 50px;
    height: 50px;
    background: yellow;
    display: inline-block;
    margin-right: 10px;
    z-index:1;
    border:3px solid white;
}

.border{
  border-right: 3px solid red;
  height: 100%;
  left: 24px;
  position: absolute;
  top: 0;
  width: 1px;
    z-index:-1;
}

用我的替换你的课程，你将获得两种效果

Answer 4

.border{
  border-right: 3px solid red;
  height: 100%;
  left: 24px;
  position: absolute;
  top: 0;
  width: 1px;
}

类需要添加以下属性和值

z-index: -1;

Answer 5

在你的CSS中你需要为.border类添加以下两个规则：

  z-index: -1;
  margin-left: -1px

第一行将行放在框后面。因此，在没有方框的垂直空间中，线条会显示出来。

将边框完美地置于框下方的一个小改进：

您的边框宽度为3px，因此边框应向左移动至少1px以保持居中。使用margin-left：-1px可以得到正确的结果。如果你想让边框完全完美居中，你应该使用4px的边框和-1px的边距或2px的边框和1px的边距;

请参阅http://jsfiddle.net/w5TY9/1/

Answer 6

将 z-index=-1 添加到边框类。

检查此fiddle

Answer 7

你想要的很容易。简短版本是这样的：

     <div style="background-color:yellow; height:30px;width:30px;">&nbsp;</div>
       <div style="background-color:red; height:30px; width:5px; margin-left:10px;">&nbsp;</div>

通过这种方式，你有一个背景为黄色的正方形，下面有一条红线 5px宽度或任何你想要的。

在垂直div之间添加垂直线

7 个答案: