divの幅を浮動小数点数に合わせる

Question

私は、複数の浮動小数点数を持つcontainer divを持っています。コンテナの幅をコンテンツに合わせようとしています。私は今、最初にコンテンツをコンテナに合うjsFiddleを持っている：

しかし、とすぐに画面の幅が小さくなると、コンテンツのdivは、同じ行に表示するにはスペースを持っていないとして、この問題が発生しました：

これは私のコードです：

.container { 
 

 
    border: 1px solid red; 
 

 
    display: table; 
 

 
} 
 

 
.content { 
 

 
    border: 1px solid blue; 
 

 
    width: 100px; 
 

 
    height: 100px; 
 

 
    float: left; 
 

 
}

<div class="container"> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div style="clear:both"></div> 
 
</div>

3番目のコンテンツdivが次の行に移動すると、コンテンツに合わせてコンテナdivが小さくなる必要があります。どのようにしてコンテナの幅をコンテンツに合わせることができますか？

明快に編集： 子divが正しく動作しています。この質問は、コンテナの幅を変更することに関するものです。

Answer 1

メディアクエリを使用して、画面サイズに基づいてコンテナの幅を変更できます。 .containerが通常の場合はwidth、子どもの場合は、子供の場合は width =子供の幅+コンテナの境界で、それぞれwidth: 102px（幅+枠の左右）をとります。

画面の幅が.container幅より小さくなると、下の最後の要素がプッシュされます。この時点から.containerの幅に基づいてメディアクエリを設定することができます。固定幅を追加することにより

https://jsfiddle.net/v5czL9he/2/

* { 
 
    margin:0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    border: 1px solid red; 
 
    display: table; 
 
} 
 

 
.content { 
 
    border: 1px solid blue; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
} 
 

 
/* if screen width < .container width 
 
    decrease last element from fisrt row 
 
    decrease it's width from the container width 
 
*/ 
 
@media only screen and (max-width: 308px) { 
 
.container { 
 
    width: calc(306px - 102px); 
 
} 
 
} 
 

 
@media only screen and (max-width: 206px) { 
 
.container { 
 
    width: calc(204px - 102px); 
 
} 
 
}

<div class="container"> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div style="clear:both"></div> 
 
</div>

Answer 2

？ （私があなたが望むものを正しく理解している場合）

width:305px;