css тройная граница?

Question

Привет, я пытаюсь создать тройную границу с помощью css. Сейчас у меня две границы, но вторая граница не обходит элемент (div.container#main) полностью.

Я следил за этим blog post. JSFiddle.

Любая помощь по получению границы вокруг элемента полностью будет отличной.

Answer 1

По сути, проблема заключается в том, что вы используете позицию aboslute и вычисляете вещи из элементов worng.

Когда что-то абсолютно позиционируется только при достижении высоты, когда эта высота указана или когда элемент имеет контент. Обходным путем для этого в этом случае является присвоение значения top и bottom, что по существу сделает элемент exapand. Вы забыли значение bottom. Добавление это дает нам это:

http://jsfiddle.net/J3e9R/2/

Однако вы заметите, теперь элемент идет в нижней части окна просмотра. Это связано с тем, что без позиционированного родителя (относительного, абсолютного, статического) он по умолчанию использует элемент верхнего уровня как контекст для позиционирования.

Чтобы обойти это, мы можем либо добавить дополнительный элемент-обертку, либо присвоить ей относительную позицию, либо перенести наши стили границы на ваш div.row; В любом случае, метод один и тот же, просто зависит от того, можете ли вы добавить другую оболочку или будет ли div.row работать для вашей ситуации. Так что это дает:

http://jsfiddle.net/J3e9R/3/

Теперь вы можете видеть, что мы на самом деле есть внутренняя граница работает согласованно с размерами коробки. Но теперь наша позиция не работает. Это потому, что вместо вычисления нашего смещения от внешнего элемента #main мы работаем с внутренней стороны так, нам нужно, чтобы инвертировать наши измерения:

http://jsfiddle.net/J3e9R/4/

Хорошо, теперь мы вернулись к тому, заказ на наружной край нашей оригинальной коробке, так что мы просто должны привести его к середине нашей внешней границы, поэтому мы этого нужно просто изменить измерение примерно до половины, наконец, дает нам то, что мы хотим:

http://jsfiddle.net/J3e9R/1/