Добавить вертикальную линию между вертикальной дивой

Question

Я хочу, чтобы добавить вертикальную линию между несколькими дивами так, что это похоже на прилагаемом изображение:

Я пытаюсь добиться того, что, добавив 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

Добавить z-index=-1 до границы класса.

Установите этот флажок fiddle

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, либо margin-left от -1px или границу с 2px и margin-left от 1px;

см http://jsfiddle.net/w5TY9/1/

Answer 6

.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 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 или что вы хотите.