0

您好,我正在尝试使用 css 创建三重边框。现在我得到的是两个边框,但第二个边框并没有div.container#main完全绕过 element()。

我一直在关注这篇博文JSF中。

任何关于让边框完全绕过元素的帮助都会很棒。

4

1 回答 1

3

所以本质上问题是你使用绝对位置并从磨损元素计算东西。

当某些东西被绝对定位时,只有在指定高度或元素有内容时才会增加高度。在这种情况下,一种解决方法是同时分配 atopbottomvalue,这实际上会使元素扩展。你忘记了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/

于 2013-03-14T00:37:03.020 回答