Question

使用div标签寻找垂直标尺。我想要这样的东西。 http://i.imgur.com/ASF8DEt.png

我的代码 DEMO

CSS：

.acc{
    float:left;
    width:400px;
    height:auto;
    overflow:hidden;
    border:#FFF solid 3px;
    background-color:#319dba;
}
.acc .title{
    width:100%;
    height:30px;
    color:#FFF;
    text-align:center;
    padding-top:5px;
    border-bottom:3px #FFFFFF solid;
}

.acc .debit{
    float:left;
    width:198px;
    height:auto;
}
.acc .vr{
    float:left;
    width:2px;
    height:100%;
    background-color:#fff;
    border:1px solid #fff;
}
.acc .credit{
    float:right;
    width:198px;
    height:auto;
}
.acc .row{
    width:100%;
    height:25px;

}

但是vr不会达到100％的高度。帮我。感谢

Answer 1

不使用vr div，而是在左侧元素上应用边框：

.acc .debit {
  border-right: 3px solid white;
}

这也是上层人力资源的制作方式。

这是fiddle

如果您不想打扰宽度，可以从左侧应用一半边框，从另一侧应用一半边框或切换框尺寸。

Answer 2

请尝试以下操作： Demo

CSS：

 .acc {
    float:left;
    width:400px;
    height:auto;
    overflow:hidden;
    border:#FFF solid 3px;
    background-color:#319dba;
    position: relative;
}
.acc .title {
    width:100%;
    height:30px;
    color:#FFF;
    text-align:center;
    padding-top:5px;
    border-bottom:3px #FFFFFF solid;
}
.acc .debit {
    float:left;
    width:198px;
    height:auto;
}
.acc .vr {
    width:2px;
    height:100%;
    background-color:#f00;
    border:1px solid #f00;
    height: 100%;
    position: absolute;
    right: 0;
    left:50%;
}
.acc .credit {
    float:right;
    width:198px;
    height:auto;
}
.acc .row {
    width:100%;
    height:25px;
}

需要vr使用div标签，但它不会达到100％的高度

2 个答案: