带边框的百分比

有100％宽度（150px）制作.teste的方法吗？带边框的百分比

<div class='debug'> 
    <div class='debug'> 
     <div class='teste'>Hello world!</div> 
    </div> 
</div> 

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 

.debug { 
    min-height: 100px; 
    width: 150px; 
    border: 1px solid red; 
} 

.teste { 
    /* width: 150px; */ 
}

http://jsfiddle.net/yxbwv62L/

所计算的大小是148px。为什么不是150px？

来源

2015-10-13 user1101

将其更改为'箱尺寸：内容箱;'？ – j08691

边框...如果你想div没有边框计算为150px，你需要采用盒子大小调整：border-box out。 – Lowkase

但是之后我会在其他div中出现问题... – user1101

给.teste一个边界大小的负左右边界（在这种情况下为1px）。

.teste { 
    margin-left: -1px; 
    margin-right: -1px; 
}

来源

2015-10-13 17:53:53 Will

这太具体了，我想要一个更一般的解决方案。无论如何感谢 – user1101

这是因为您正在使用box-sizing: border-box。这使得.debug的宽度保持在150px，并且边界在div内。所以.teste的剩余宽度仅为148px。如果您想保留两个宽度在150px那么你可以像这样在一旁的属性切换：

.debug { 
    width: 150px; 
} 

.teste { 
    width: 100%; 
    min-height: 100px; 
    border: 1px solid red; 
}

fiddle

来源

2015-10-13 18:00:22 cocoa

谢谢！但在此之后，我无法嵌套具有边框的div。这是对的？嵌入'.debug'中的 – user1101

？是的，我猜这是真的 – cocoa

带边框的百分比

回答

相关问题