css - 75％+ 25％は100％にはなりません...どうやら！CSSの問題

Question

画像の幅が75％、p-boxの幅が25％ですが、親コンテナに収まりません。

http://jsfiddle.net/bmBnF/4/

Answer 1

問題は、CSSwidthでは実際には「コンテンツ幅」を意味するということです。パディングとボーダーはカウントされないので、それらを補正するために幅を調整（縮小）する必要があります。

更新されたjsfiddleを参照してください。20%幅を（両側16%のマージンを補正する）に変更し、丸めの問題を考慮してに変更したことに注意してください。2%80%79%

注：新しいブラウザでは、特定の要素に「従来の」（Microsoft）ボックスモデルを強制的に使用できますwidth。これは、パディングと境界線を含む全幅を意味します。例については、クトゥルフの回答を参照してください。

Answer 2

-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;.flex-captionに追加するだけです：

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

これはボックスモデルのバグです。ウィキペディアで読むことができます：http：//en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Answer 3

これを少し調整してみます：

.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 */ )
}