Règle verticale (par opposition à <hr>) en CSS

Question

Je sais qu'elle n'existe pas, mais existe-t-il une version purement CSS ?

Je voudrais définir la hauteur et faire en sorte qu'il ait une largeur de 1px (avec une ombre, si possible).

Je n'arrive pas à imaginer un moyen purement CSS de le faire. Il faudrait que le positionnement soit absolu.

Comme mon conteneur a deux divs côte à côte, 60-40% de division par exemple. J'ai besoin d'une règle verticale entre les deux, mais je ne veux pas vraiment utiliser la fonction border-left sur la div 2.

Des suggestions ?

Answer 1

Pour cela, vous devez essentiellement définir un endroit où le placer et une déclaration div fonctionne.

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

cela pourrait également être référencé :

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

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

Vous pouvez changer la position et la faire aller vers le haut/bas ou la gauche/droite avec le placement css et z-index.

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

---

En gros,

 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

Cet article a déjà reçu un awnser mais je suis confronté au même problème et j'ai trouvé quelque chose d'intéressant :

        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 signifie règle horizontale, y ajouter une classe verticalement semble proche d'un paradoxe, mais cela me semble plus organisé.

Answer 3

Mettez un <hr> entre les deux, mais en lui donnant la hauteur, la bordure et l'ombre que vous souhaitez ?