インラインブロック要素のコンテナを縮小してラップします。

Question

私は、水平に中央に揃えたいいくつかの行に一連のインラインブロック要素を持っています。インラインブロック要素はすべて同じ固定サイズですが、ページのサイズ変更や要素の追加や削除を処理できるようにしたいと思います。

私はhtml/cssを削除し、分かりやすくするためにセンタリングの試行を削除しました。むしろこれより

-----------------BODY------------------ 
|          | 
||-------------CONTAINER-------------|| 
||-INLINEBLOCK---INLINEBLOCK--  || 
|||____________||____________|  || 
||-INLINEBLOCK--      || 
|||____________|      || 
||___________________________________|| 
|_____________________________________| 

：それは第三インラインブロック要素がドロップダウンするように、あなたは結果ウィンドウのサイズを変更する場合は、コンテナの幅を満たし、我々はこれを取得http://jsfiddle.net/fe25H/1/

でだ

-----------------BODY------------------ 
|          | 
| |----------CONTAINER---------| | 
| |-INLINEBLOCK---INLINEBLOCK--| | 
| ||____________||____________|| | 
| |-INLINEBLOCK--    | | 
| ||____________|    | | 
| |____________________________| | 
|_____________________________________| 

JavaScriptベースのソリューションに関するptriekの回答に基づいて編集：

Ptriekのコードは便利な出発点でした。特定のケースでは機能しますが、一般的なケースでは機能しません。私はそれをもっと柔軟にするために書き直しました（http://jsfiddle.net/fe25H/5/参照）。

Answer 1

これについて少し考えた後、私は上記のWexのコメントに同意します。

だから私は、JavaScriptのソリューション（jQueryの）をいじっ - 私はこの上の専門家ではないので、コードが改善される可能性があります - 私はそれはあなたが必要な正確に何を推測：

var resizeContainer = function() { 
 
    var w_window = $(window).width(); 
 
    var w_block = $('.inlineblock').width(); 
 
    if (w_window < w_block * 3 && w_window >= w_block * 2) { 
 
     $('.container').width(w_block * 2); 
 
    } else if (w_window < w_block * 2) { 
 
     $('.container').width(w_block); 
 
    } else { 
 
     $('.container').width(w_block * 3); 
 
    } 
 
}; 
 

 

 
$(document).ready(resizeContainer); 
 
$(window).resize(resizeContainer);

body { 
 
    text-align:center; 
 
} 
 
.container { 
 
    display: inline-block; 
 
    background-color: #aaa; 
 
    text-align:left; 
 
} 
 
.inlineblock { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #eee; 
 
}

<div class='container'> 
 
    <div class='inlineblock'></div> 
 
    <div class='inlineblock'></div> 
 
    <div class='inlineblock'></div> 
 
</div>

http://jsfiddle.net/ptriek/fe25H/4/

Answer 2

あなたは、インラインブロックの最後に目に見えないプレースホルダを追加することができます。それは最後の行を左揃えにします。

http://jsfiddle.net/aakt65x4/

あなたが最初の行を埋めていない場合は、全体の事は、左揃え表示されます。

HTML：

<!-- 
    Centers a group of boxes that wrap to the width of its container. 
    Also left-aligns them inside the container. 
    Issue: Does not center group if there aren't enough boxes to fill 
    the first row. 
    --> 
<div class="container"> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 

    <!-- 
     How many placeholders do you need? 
     At least the number of blocks minus two. 
     --> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
</div> 

CSS：

body { 
    text-align: center;  /* center a max-width container */ 
    font-size: 0;   /* remove spaces between blocks */ 
} 
.container {    /* you don't need this */ 
    background-color: #eee; /* so you can see what's happening */ 
    max-width: 960px;  /* to demonstrate the centering of a max-width container */ 
    display: inline-block; /* center the max-width container */ 
    text-align: center;  /* center the group of blocks */ 
} 
.block { 
    display: inline-block; /* left-align within the group */ 
    background-color: red; /* so you can see what's happening */ 
    height: 100px; 
    width: 100px; 
    margin: 10px; 
} 
.placeholder { 
    display: inline-block; /* add to the line of blocks */ 
    width: 120px;   /* width + margin of a block */ 
} 

Answer 3

述べた問題は、私のCSSの知識が純粋にCSSと完全に解くことができない、私を取る限り、です。

マイクM.リンの答えは非常に巧妙な方法です、私は創造性が大好きですが、私はそれを拡張できるいくつかの誤りがあります。

注：誰かが一般的な解決策を見つけた場合は、誰もそれを行っていないのでお知らせください。 Etsy、Amazon、Redbubbleは、これがどこにでも実現するのを見ることはできません...

---

1）

あなたは必要としない「2マイナスdivの項目の配列の長さ」、これはアイテムの大きなnに対して計算コストが高く得ることができます。コンテナ内に新しい行を作成するには、おおよそのルールとして、十分なプレースホルダ「ブロック」が必要です。実際には、プレースホルダの数は、（擬似コードで）である：私は場合N < n_maxを省略している

let n = number of block items to display 
let n_max = number of block items that fit into one row 
let n_ph = number of "placeholder" block items 

/*if number of items exceeds max number for a row (starts a new line), then 
you'll need to start another line with n_max - 1 placeholders*/ 
if n >= n_max then 
    n_ph = n_max - 1 
end if 

//you don't need any placeholders if number of items fills all rows completely 
if n % n_max == 0 then 
    n_ph = 0 
end if 

注意。それは難しいですし、n_ph値は、n < n_maxの値で遊ばなければなりません。 異なるウィンドウサイズでn_phを使用する必要がある場合は、ウィンドウ幅オブザーバを追加し、「応答可能な」幅のバンドにプレースホルダを追加または削除することを検討します。それは苦痛ですが、あなたはおそらくどちらかのこれまでN < n_maxを持っていない、または、あなたのn_maxは小さく、それが反応するバンドのための痛みを「手動テイラー」n_phではありません。

2）

あなたはinline-blockするコンテナを必要としません。それは私が見つけたかどうかで動作します。