包裝寬度不適合2列50％

我已經設置了960px寬度的頁面包裝。我創建了2個塊來填充包裝寬度，所以我將單獨塊的寬度設置爲50％，但這兩個塊並不適合在te包裝中並排放置。包裝寬度不適合2列50％

我想它與1px固體邊框的一個單獨的塊有關。是不是有1px邊框的塊會是50％寬度+ 1px邊框？

如何在不刪除1px邊框的情況下解決此問題？

來源

2012-12-26 user1822193

不使用百分比然後。在div和1px邊框上使用476px寬度。你也可以使用margin: -1px;

來源

2012-12-26 19:48:59 Chanckjh

+1。這對我來說更有意義，並且可以在任何瀏覽器中工作。如果父容器是像素，那麼百分比寬度不會帶來任何好處，除非您的容器大小定期更改。 – Mig

這很好。但對於響應式解決方案，您通常會使用百分比。 – JimmyRare

你也可以使用'margin：-1px' – Chanckjh

如果您不需要支持IE7，你應該使用：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */

這盒模型添加邊框和填充寬度，而不是外部的內部。

box models

更多信息有a great article at css-tricks.com。

來源

2012-12-26 19:51:22 JimmyRare

這是最好的選擇。我一直使用這個 –

+1 Yep，邊界框規則。 –

正確的答案是這樣的：

這是因爲顯示：inline-block的考慮在html空白。如果您刪除了div之間的空格，則按預期工作。活生生的例子：http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

但是，如果你想保持你的代碼清潔/容易閱讀（至少在開發模式），您可以使用空格刪除通過CSS的空格，這樣可以保持你的漂亮HTML佈局。如果您希望將文本包裹在列內，請不要忘記將空格再次恢復正常。

.container { white-space: nowrap; } 
.column { display: inline-block; width: 50%; white-space: normal; } 

<div class="container"> 
    <div class="column">text that can wrap</div> 
    <div class="column">text that can wrap</div> 
</div>

來源：https://stackoverflow.com/a/6872020/2208466和https://stackoverflow.com/a/10592283/2208466

來源

2016-03-29 18:27:20

包裝寬度不適合2列50％

回答

相關問題