パーセンテージ幅のdivでインラインブロックを100％幅にするのはなぜですか？

Question

私はサイドバイサイドイメージを表示するシンプルなカードセットを持っています。これは画面の幅に対応する必要があります。だから、簡単なinline-blockを使用して、私はこのような構造を持っている：このCSSで

<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> 

：

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

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

しかし、それはdisplay: blockであるかのように私の驚きに、親のdiv、.cardsは、ページの幅にまたがります：

しかし、もし.cardディのIハードコード幅それは期待どおりに動作します。この2つを比較するのはfiddleです。

inline-blockは、100％にならないパーセンテージを考慮しないのはなぜですか？これをパーセンテージで行う方法はありますか？ （私はそれらを両方とも50％にすることができましたが、box-sizing: border-boxであっても垂直に積み重ねる可能性があります）。

Answer 1

.cardsには、収縮に対する幅があります。それは、コンテンツが望むだけの広さにしようとします（十分なスペースがあるとします）。

ただし、内容のパーセンテージの幅は.cardsに依存します。

円形の定義は次のように解決される：コンテンツの

1. パーセントであるauto

   として扱われ、画像が300pxあるその固有の幅を有します。

2. .cardsはもはやそれは広い300px + 300px = 600pxなり、ある.cards

   依存内容に応じて大きさです。 ^{_{実際には、HTMLにいくらかスペースがあるため、もう少し多くのスペースがあるので、それを避けるためにHow to remove the space between inline-block elements?を参照してください。ただし、無視してみましょう。}}

3. 内容は今前のステップから.cardsの幅に対して相対的に解決され、アカウントに割合を取って、再度サイズです。

   つまり、画像は35% * 600px = 210pxワイドになります。

Answer 2

inline性質を維持しながらinline-block性は、100％の空間を占有します。しかし、ビジュアルアピアランス上の1行がオーバーフローしようとすると、inline-propertyは別の行に移動します。たとえばについては

：

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

私はあなたは私が何を意味するか理解してほしいです。