css - rio - reloj mundial

Regla vertical(a diferencia de<hr>) en CSS

Question

Sé que no existe, pero ¿hay una versión de CSS pura?

Me gustaría establecer la altura y hacerla de 1px de ancho (con sombra, si es posible).

Simplemente no puedo comprender una forma CSS pura de hacer esto. Tendría que estar absolutamente posicionado.

Como mi contenedor tiene dos divs de lado a lado, 60-40% se divide por ejemplo. Necesita la regla vertical entre los dos, pero realmente no quiere usar el border-left en la división 2.

¿Alguna sugerencia?

Answer 1

Coloca un elemento <hr> entre los dos, ¿pero dale un estilo para tener la altura / el borde / la sombra que deseas?

Answer 2

Este post ya tiene un awnser pero me enfrento al mismo problema y encontré algo interesante:

        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 significa regla horizontal, agregar una clase verticalmente a suena cerca de una paradoja, pero a mi parecer es más organizada.

Answer 3

para esto básicamente necesitas configurar un lugar para ponerlo y una declaración div funciona.

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

Esto también podría ser referenciado:

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

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

Puede cambiar la posición y hacer que suba / baje o de izquierda a derecha con la colocación de css y el índice z

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

básicamente

 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