75% + 25% macht nicht 100% ... anscheinend! CSS-Problem

Question

Ich habe eine Bildbreite von 75% und eine P-Box mit einer Breite von 25%, aber sie passen nicht in ihren übergeordneten Container!

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

Answer 1

Ich würde dieses ein wenig versuchen Einstellung :

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

Answer 2

Das Problem ist, dass in CSS width bedeutet eigentlich "Inhaltsbreite". Polsterungen und Ränder zählen nicht, daher müssen Sie Ihre Breiten anpassen (verringern), um sie zu kompensieren.

Siehe updated jsfiddle. Beachten Sie, dass ich die 20% Breite zu 16% (die 2% Ränder auf jeder Seite kompensiert) geändert und 80% zu 79% geändert haben, um Rundungsprobleme zu berücksichtigen.

Hinweis: In neueren Browsern können Sie die Verwendung des "traditionellen" (Microsoft) Box-Modells für bestimmte Elemente erzwingen, dann würde width die volle Breite bedeuten, einschließlich Padding und Rahmen. Siehe Cthulhus Antwort für ein Beispiel.

Answer 3

Fügen Sie einfach -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; .flex-Bildunterschrift:

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

Dies ist die Box-Modell Bug ist, kann man es auf Wikipedia lesen: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug