帶邊框的百分比

有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

帶邊框的百分比

回答

相關問題