Warum erzwingen Divs mit einer prozentualen Breite einen Inline-Block auf 100% Breite?

Question

Ich habe einen einfachen Satz Karten, die nebeneinander Bilder zeigen, die ich auf die Bildschirmbreite ansprechen muss. So einfach inline-block verwenden, habe ich diese Struktur:

<div class="cards" id="ex1"> 
    <div class="card"> 
    <img src="http://www.clker.com/cliparts/5/b/a/7/1194986784455829849basebalm_ganson.svg.med.png" /> 
    </div> 
    <div class="card"> 
    <img src="http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png" /> 
    </div> 
</div> 

Mit dieser CSS:

.cards { 
    display: inline-block; 
    border: 2px solid #808080; 
    border-radius: 2px; 
    padding: 10px; 
    margin-bottom: 20px; 
} 

#ex1 .card { 
    width: 35%; 
    display: inline-block; 
} 

Aber zu meiner Überraschung, die Mutter div, .cards, die Breite der Seite erstreckt, als ob es display: block waren :

wenn ich jedoch fest einprogrammieren die Breiten der .card di vs, es funktioniert wie erwartet. Hier ist eine fiddle, die die beiden vergleicht.

Warum beachtet inline-block keine Prozentsätze, die nicht zu 100% addiert werden? Gibt es eine Möglichkeit, dies mit Prozentsätzen zu tun? (Ich könnte sie beide 50% machen, aber selbst mit box-sizing: border-box kann dies dazu führen, dass sie vertikal stapeln.)

Answer 1

.cards hat eine Shrink-to-Fit-Breite. Das heißt, es wird versucht, nur so breit zu sein, wie es der Inhalt will (vorausgesetzt, es ist genug Platz vorhanden). Der Inhalt hat eine prozentuale Breite, die von .cards abhängt.

Die kreisförmige Definition wie folgt gelöst:

1. Die Prozentsätze der Inhalte als auto

   behandelt werden, das heißt, müssen die Bilder, deren intrinsische Breite, die 300px ist.

2. .cards bemessen ist, entsprechend den Inhalten, die nicht mehr auf .cards

   abhängen Das heißt, wird es 300px + 300px = 600px breit. ^{_{Nun, in der Tat etwas mehr, weil Sie etwas Platz im HTML haben, siehe How to remove the space between inline-block elements?, um es zu vermeiden, aber lassen Sie uns das ignorieren.}}

3. Die Inhalte sind wieder groß, nun die Prozentsätze berücksichtigt, die relativ zur Breite des .cards aus dem vorhergehenden Schritt gelöst werden.

   Das heißt, die Bilder werden 35% * 600px = 210px breit.

Answer 2

Die inline-block Eigenschaft nimmt 100% Raum während der Eigenschaft inline wobei beibehalten wird. Wenn jedoch eine einzelne Zeile in der visuellen Darstellung überläuft, wird die Inline-Eigenschaft in einer anderen Zeile angezeigt.

Zum Beispiel:

element { 
    display: inline; /* Makes the content go on the same line*/ 
} 
element { 
    display: inline-block; /* Makes the content go on the same line while not overflowing 
          and going on a different line while about to overflow*/ 
} 
element { 
    display: block; /* Makes the content go on different lines*/ 
} 

Ich hoffe, Sie verstehen, was ich meine.