Question

我有一个div元素，如下所示：

<div style="height: 10%; width: 20%; border: 1px solid black">
     Div Content
</div>

由于上面的div的高度和宽度都是％，我希望在调整元素大小时也可以调整边框宽度。看起来除了像素之外没有办法命名边框宽度。那么如何调整边框宽度呢？

Answer 1

您可以使用jQuery。例如：var x = $(".div-class").width() or .height现在你有div高度或宽度（以像素为单位）。进行一些计算以获得边界高度。对于exaple我们需要10％的身高。 var borderHeight = x *0.1;现在只为div $("div-name").css("border-size",borderHeight + "px");

提供

Answer 2

您可以使用百分比填充和背景颜色的包装：

<div class="wrapper">
    <div class="content">
         Div Content
     </div>
 </div> 

.wrapper {
    background: #000;
    padding: 1%;
    width: 20%;
    height: 10%;
}

.content {
    background: #fff;
}

链接到jsfiddle：http://jsfiddle.net/rckbk9p6/

自调整CSS边框宽度

2 个答案: