75％+ 25％不會使100％...顯然！ CSS問題

我有一個寬度爲75％的圖像寬度和寬度爲25％的p-box，但它們不適合其父容器！75％+ 25％不會使100％...顯然！ CSS問題

2012-04-09 Mads K

盒模型 - http://www.w3.org/TR/CSS2/box.html – xandercoded 2012-04-09 15:52:41

http://paulirish.com/2012/box-sizing-border-box-ftw/ – brezanac 2012-04-09 16:00:37

我會嘗試調整這個有點：

.flexslider .slides img { 
    float: left; /* leave other properties */ 
} 

.flex-caption { 
    width: 16%; /* leave others - width is 16% because you have a 2% padding around all sides (16 width + 2 left + 2 right */) 
}

來源

2012-04-09 15:55:10 mikevoermans

我只是做一個簡短的蕪湖！ http://jsfiddle.net/bmBnF/6/似乎與float：left，並將寬度保持爲20％:) – 2012-04-09 16:01:14

的問題是，在CSS width實際上是指「內容寬度」。填充和邊框不計數，所以您必須調整（縮小）寬度以補償它們。

請參閱updated jsfiddle。請注意，我將20%寬度更改爲16%（補償各方的2%頁邊距），並將80%更改爲79%以解決舍入問題。

注意：在較新的瀏覽器中，您可以強制使用「傳統」（微軟）盒模型用於特定元素，那麼width將表示全寬，包括填充和邊框。請參閱克蘇魯的答案。

來源

2012-04-09 15:51:43 bfavaretto

但我沒有任何填充或邊距在任何地方？即時通訊甚至使用CSS重置來消除:) – 2012-04-09 15:56:33

你有'padding：2％''.flex-caption'。 – bfavaretto 2012-04-09 15:58:50

在JSFiddle上看不到以下任何內容:-( – the0ther 2013-09-09 21:15:00

只需添加-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;到.flex字幕：

http://jsfiddle.net/Cthulhu/bmBnF/2/

這盒模型錯誤，你可以在維基百科上讀到它：http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

來源

2012-04-09 15:53:43 Cthulhu

這仍然沒有不要做詭計......標題框仍然漂浮在圖像下:) – 2012-04-09 15:58:13

我不確定你的意思。我提供了一個更新到你自己的jsfiddle，它可以很好地處理我給你的解決方案。你能發送更多細節嗎？ – Cthulhu 2012-04-09 16:00:10

75％+ 25％不會使100％...顯然！ CSS問題

回答

相關問題