沒有設置父寬度的元素的中心流體網格

我想將調整大小時調整爲居中的元素的「網格」居中。沒有設置父寬度的元素的中心流體網格

像這樣：

___________________ 
|     | 
| [] [] [] [] | 
| [] [] [] [] | 
| [] [] []  | 
------------------- 
________________ 
|    | 
| [] [] [] | 
| [] [] [] | 
| [] [] [] | 
| [] []  | 
---------------- 
_____________ 
|    | 
| [] [] | 
| [] [] | 
| [] [] | 
| [] [] | 
| [] [] | 
| []  | 
-------------

我已經嘗試設置max-width，但調整時會導致這個問題：

________________ 
|    | 
| [] [] [] | 
| [] [] [] | 
| [] [] [] | 
| [] []  | 
---------------- 
_____________ 
|    | 
| [] []  | 
| [] []  | 
| [] []  | 
| [] []  | 
| [] []  | 
| []   | 
-------------

我不考慮使用媒體查詢和設置硬widths（或甚至max-widths）爲每個配置一個真正的解決方案。

我對CSS3開放，只要它優雅地降級，並且想要避免使用JavaScript。

編輯：添加非語義元素也是一個交易斷路器，一個容器div或其他東西可以通過但不理想。

的標記應該如下：

<ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
</ul>

這裏是一個demo讓你開始。

謝謝。

來源

2011-11-30 bookcasey

我真的不認爲有一種方法可以在不使用javascript或jQuery的情況下執行所要求的操作 – CBRRacer

根據您的新需求添加了解決方案。 – ScottS

對於你的確切要求是否是居中還是有點模糊（因爲上面所有的插圖都顯示了偶數個元素，所以我不知道你對奇數的期望值，在你的小提琴中，我只是增加了一個text-align: center到ul並取得了定心作用（http://jsfiddle.net/nR9Mk/1/），但我不知道這是否是行爲，你的願望

更新：如果你只用偶數打交道，你想他們仍然分爲兩個，那麼這將工作：http://jsfiddle.net/nR9Mk/8/。

ROUND 2：根據您透露的「奇數」要求，我提出了一個可行的解決方案。注意：1）它確實需要一些額外的HTML標記，2）你必須設置一些類型的實際限制，你想要去多大，並仍然得到效果。 Here是由outline和here顯示的「緩衝區」元素的代碼是否與刪除的輪廓。

ROUND 3：我知道你已經接受了我的答案，但我已經在研究這個問題，所以我想我會提供它。根據您的交易斷路器評論，here is a modified plan可能對您（或其他人）有用。它是一種混合體 - 「有時」它將元素推向左邊（通常在最不方便的時候），有時候讓它們保持「離開列」但居中。爲了防止它看起來簡單「怪異」，它給出了六列寬的max-width。

來源

2011-11-30 19:54:53 ScottS

我用奇數更新了我的例子。最後一行的位置並不理想，我仍在尋找其他解決方案，但謝謝。 – bookcasey

謝謝。這肯定會需要不同的解決方案。 – ScottS

斯科特，首先，非常感謝您的意見。 +1，所以你知道。然而，額外的元素是一個交易斷路器，我很抱歉沒有在我的答案中指定。我也觀察到這個[bug]（http://i.imgur.com/CP6AI.png）。再次感謝。 – bookcasey

沒有設置父寬度的元素的中心流體網格

回答

相關問題