列之間的視覺作曲家分隔線

Question

我使用的視覺作曲家插件，它可以很容易地創建列。我已經到了，我想創造一個環保總局

列這怎麼能在一個簡單的方法來完成之間

html,body { height:100%;width:auto;} 
 

 
.left { 
 
float: left; 
 

 
} 
 
#w1 {width:22%; 
 
background-color:#009; 
 
    margin-right: 4%; 
 
    
 
} 
 
#w2{width:48%; 
 
background-color:#9F3; 
 
    margin-right: 4%; 
 
} 
 
#w3{ width:22%; 
 
background-color:#30C;}

<div class="left" id="w1">TEST</div> 
 
<div class="left" id="w2">TEST</div> 
 
<div class="left" id="w3">TEST</div>

rator線問題？我已經重新創建了3列如何設置：

Answer 1

您可以使用:after：僞元素。

html, 
 
body { 
 
    height: 100%; 
 
    width: auto; 
 
} 
 
.left { 
 
    float: left; 
 
    position: relative; 
 
} 
 
#w1 { 
 
    width: 22%; 
 
    background-color: #009; 
 
    margin-right: 4%; 
 
} 
 
#w2 { 
 
    width: 48%; 
 
    background-color: #9F3; 
 
    margin-right: 4%; 
 
} 
 
#w3 { 
 
    width: 22%; 
 
    background-color: #30C; 
 
} 
 
.left:not(:nth-of-type(2)):after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: -10%; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 2px; 
 
    background: black; 
 
} 
 
.left:last-of-type:after { 
 
    right: 108%; 
 
}

<div class="left" id="w1">TEST</div> 
 
<div class="left" id="w2">TEST</div> 
 
<div class="left" id="w3">TEST</div>