Question

我有一个div（父母），里面有三个主要元素： - 从div顶部到中间部分（到标题）的虚线， - 标题， - div中间到底部的虚线

问题是 - 如何使这些虚线（作为背景为div）流动，并使其高度适应屏幕高度？我有这样的小提琴： 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或者可能有更简单的黑客攻击？

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 class="dot1">Bakery & Sweets</p>

这样的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%
}

我对齐了左边的点的中间位置：49％。如果你认为这个值不匹配。设置一个精确的中间使用“calc”像left:calc(50% - 9px);我们正在减少9px宽度

div中的虚线/圆形垂直线

1 个答案: