Вертикальное правило (в отличие от <hr>) в CSS

Я знаю, что этого не существует, но есть ли чистая версия CSS?

Хотелось бы установить высоту и сделать ее шириной 1px (с теневым, если это возможно).

Просто не может понять чистый CSS-способ сделать это. Должно быть абсолютно позиционировано.

Поскольку мой контейнер имеет два div, бок о бок, например, 60-40%. Требуется вертикальное правило между ними, но на самом деле не нужно использовать border-left в div 2.

Любые предложения?

Ответы

Ответ 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 и 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

Ответ 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 означает горизонтальное правило, добавляя класс по вертикали, он звучит близко к парадоксу, но он выглядит более организованным для меня.

Ответ 3

Поместите элемент <hr> между ними, но настройте его так, чтобы он имел высоту/границу/тень, которые вы хотите?