Question

所以我试图建立一个各种各样的图表，我试图在div上绘制多条线，而不是替换它。我想要这样的东西：

enter image description here

我目前的脚本基本上是这样的：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

，您可以大量清理该代码

我可以在页面上划一条线吗？

1 个答案: