javascript - 我可以在页面上画一条线吗？

Question

因此，我正在尝试构建某种图表，并且我正在尝试在 div 顶部绘制多条线，但不会移动它。我想要这样的东西:

我目前的脚本基本上是这样的:http://jsfiddle.net/geekongirl/sguhyuv6/1/

<!--html--><div id="flowsheet">
    <div class="flowsheet-title">
         <h2>This is the title</h2>

    </div>
    <div class="flowsheet-content">
        <div style="text-align: center;">
            <div class="flowsheet-cell">Row 1, Box 1
                <div class="flowsheet-description">Here is the description box</div>
            </div>
            <div class="flowsheet-cell">Row 1, Box 2
                <div class="flowsheet-description">Here is the description box</div>
            </div>
            <br />
            <div class="flowsheet-cell">Row 2, Box 1
                <div class="flowsheet-description">Here is the description box</div>
            </div>
            <div class="flowsheet-cell">Row 2, Box 2
                <div class="flowsheet-description">Here is the description box</div>
            </div>
            <br />
            <div class="flowsheet-cell">Row 3, Box 1
                <div class="flowsheet-description">Here is the description box</div>
            </div>
            <div class="flowsheet-cell">Row 3, Box 2
                <div class="flowsheet-description">Here is the description box</div>
            </div>
            <br />
            <div class="flowsheet-cell">Row 4, Box 1
                <div class="flowsheet-description">Here is the description box</div>
            </div>
            <div class="flowsheet-cell">Row 4, Box 2
                <div class="flowsheet-description">Here is the description box</div>
            </div>
        </div>
    </div>
</div>

CSS:

#flowsheet {
    background-color: #f5f5f5;
    position: relative;
    width: 250px;
    height: 300px;
    border-radius: 25px;
    box-shadow: 10px 10px 5px;
}
.flowsheet-title {
    text-align: center;
    height: 20px;
    margin: 10px auto 30px auto;
}
/*individual cells*/
 .flowsheet-content {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}
.flowsheet-cell {
    display:inline-block;
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    font-size:10px;
    margin: 10px 10px 15px 10px;
    padding: 10px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid black;
}
.flowsheet-cell:hover {
    background-color: #b5b5b5;
}
/*mousover descriptions*/
 .flowsheet-cell .flowsheet-description {
    display: none;
}
.flowsheet-cell:hover .flowsheet-description {
    background:#ffffff;
    position:absolute;
    display:block;
    border:1px solid #000;
    border-radius: 5px;
    font-size:12px;
    width: 185px;
    padding:5px
}

我可以画一条线，也可以画一条路径来取代盒子。我也尝试使用 hr 标签，但它隐藏在第一个 div 后面。有什么方法可以使用 Java 脚本设置多行吗？ 谢谢!

Answer 1

使用z-index 和position

http://jsfiddle.net/sguhyuv6/3/

您可以通过更好地利用 css selectors 来大量清理该代码