收縮包裝並居中嵌入塊元素的容器

Question

我有幾串內嵌塊元素，我想水平居中。內聯塊元素都具有相同的固定大小，但我希望居中能夠處理頁面大小調整和添加或刪除元素。

我已經剝離了html/css並刪除了爲清晰度居中的嘗試。這是一個在http://jsfiddle.net/fe25H/1/

如果調整結果窗口，使得第三inline-block的元素滴下來，容器填充的寬度，我們得到這樣的：

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

，而不是這樣的：

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

編輯基於ptriek有關JavaScript解決方案的答案：

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沒有完全解決的。

Mike M. Lin的回答是一個非常巧妙的方法，我喜歡創造力，但是有一些錯誤，我可以擴展。

注意：如果有人發現一般解決方案，請讓我們知道，因爲沒有機構已經做到了。 Etsy，亞馬遜，Redbubble，無法在任何地方看到這一點......

---

1）

你並不需要「2減去DIV項目的數組的長度」，這有可能會爲大n項的計算成本。相反，作爲一個近似規則，您需要足夠的佔位符「塊」來在容器中創建一個新行。事實上，佔位符的數量是（在僞代碼）：

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_MAX的情況。這是困難的，你將不得不玩n_ph值當時n < n_max。 如果你需要n_ph爲不同的窗口大小工作，我會考慮添加一個窗口寬度觀察者，併爲你的「響應」寬度帶添加或帶走一個佔位符。這是一個痛苦，但你可能要麼沒有ň< N_MAX曾經，或者，你N_MAX小，它不是爲響應帶一個痛苦的「手動泰勒」 n_ph。

2）

你不需要的容器是inline-block。它適用於或不適用我找到的。