CSS中的垂直规则(与<hr>相对)

Question

我知道它不存在,但有一个纯CSS版本吗？

想要设置高度,并使其宽1px(如果可能的话,带阴影).

只是无法理解纯粹的CSS方式.需要绝对定位.

由于我的容器并排有两个div,例如60-40%分开.需要两者之间的垂直规则,但不要真的想border-left在div 2 上使用.

有什么建议？

Answer 1

为此你基本上需要设置一个放置它的地方和一个div语句.

 <div style="width:150px;height:2px;background-color:#000000;">&nbsp;</div>

这也可以参考:

 .hr {width:150px;height:2px;background-color:#000000;} // in your css file/script

 <div class="hr">&nbsp;</div> <!-- IN HTML -->

您可以使用css placement和z-index更改位置并使其上/下或左/右

 .hr {width:2px;height:150px;background-color:#000000;position:absolute;top:0px;left:50px;z-index:10;} // in your css file/script

基本上

 width            = how wide you want it
 height           = how tall you want it
 background-color = is the color you want it to be
 position         = absolute, relative, float - basically if it stays in one place or moves with page content
 top              = where to place in reference to top of page - could be margin-top
 left             = where to place in reference to left of page - could be margin-left

Answer 2

这篇文章已经有了一个问题,但我遇到了同样的问题,我发现了一些有趣的东西:

        hr, hr.vertically {
            color: #b2b2b2;
            background-color: #b2b2b2;
        }

        hr {
            width: 100%;
            height: 0;
        }

        hr.vertically {
            width: 0;
            height: 100%;
        }

        <div style="height: 400px;">
            a
            <hr />
            <hr class="vertically" />
        </div>

Hr意味着横向规则,垂直添加一个类听起来接近悖论,但它看起来更有条理.