jquery - div中的虚线/圆形垂直线

Question

我有一个 div(父级)，其中包含三个主要元素:- 从 div 顶部到中间部分(到标题)的虚线，- 标题，- div 中间到底部的虚线

问题是 - 如何使这些虚线(作为带背景的 div)流畅，并使它们的高度适应屏幕高度？我有这样的 fiddle : http://jsfiddle.net/5wo01f1y/4/

我的一段代码:

     <section id="whatwedo">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="dots">&nbsp;</div>
                    <div class="heading"><span>We love</span> <h1>What we do</h1></div>
                    <p>Bakery & Sweets</p>  
                <div class="dots">&nbsp;</div>
                    <i class="fa fa-chevron-down btn-down"></i>
            </div>
        </div>          
    </div>
 </section>

CSS:

    @import url(http://fonts.googleapis.com/css?family=Signika+Negative:300,400,600,700&subset=latin-ext);
@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400,700,700italic&subset=latin-ext);

body {
    font-family:'Signika Negative', sans-serif;
    font-size:14px;
}

html, body {
    min-height:100%;
    height:100%;
}

#whatwedo .heading {
    display:inline-block;
    background:#da2027;
    }

#whatwedo .heading span {
    color:#fff;
    text-transform:uppercase;
    font-size:36px;
}

#whatwedo p {
    font-family:'Merriweather', sans-serif;
    color:#fff;
    font-size:1.7em;
}

#whatwedo{
    background-color:#da2027;
    margin-top:0;
    padding-top: 85px;
    padding-bottom: 30px;
    text-align:center;
    height:100%;
}

#whatwedo h1 {
    color: white;
    text-transform:uppercase;
    display:inline-block;
}

.btn-down {
    text-align:center;
    margin:0 auto;
    color:#fff;
}

.dots {
   height:100%;
   margin:0 auto;
    width:9px;
    overflow:hidden;
    background:url('http://s23.postimg.org/8wexsdl07/dot.png') repeat-x;
}

我需要使用 jquery 还是可能有更简单的 hack？

Answer 1

http://jsfiddle.net/Muthukumaru/5k7qLmjs/1/将此 css 用于顶部点

.heading span:before{
content: "\00a0 ";
background: transparent url("http://s23.postimg.org/8wexsdl07/dot.png") repeat-x scroll 0% 0%;
width:9px;
position: absolute;
top:0px;
left:49%
}

对于底部点，使用 p 标签类，如 <p class="dot1">Bakery & Sweets</p>

.dot1:before{
content: "\00a0 ";
background: transparent url("http://s23.postimg.org/8wexsdl07/dot.png") repeat-x scroll 0% 0%;
width:9px;
position: absolute;
bottom:0px;
left:49%
}

我将我使用的点中间对齐 left:49%。如果你认为这个值不匹配。设置一个精确的中间使用“计算”​​，如 left:calc(50% - 9px);我们正在减少 9px 宽度