Ich habe eine Reihe von gleich großen Blöcken eingestelltdisplay:inline-block in einem div das hattext-align:center Zum Ausrichten der Blöcke einstellen.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

Die Blöcke füllen den Div horizontal aus. Wenn das Browserfenster verkleinert wird, werden einige Blöcke in neue Zeilen aufgeteilt, wodurch mehr Zeilen und weniger Spalten erstellt werden. Ich möchte, dass alles zentriert bleibt, wobei die letzte Reihe linksbündig ausgerichtet ist:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

Was derzeit passiert, ist Folgendes:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|            _____   _____            |
|           |     | |     |           |
|           |  7  | |  8  |           |
|           |_____| |_____|           |
|                                     |

Ich kann keine zusätzlichen Füll-Divs wie einen Vorschlag hinzufügen, da es eine beliebige Anzahl von Blöcken geben kann und die Anzahl der Zeilen und Spalten abhängig von der Browser-Breite variiert. Aus dem gleichen Grund kann ich Block 7 auch nicht direkt stylen. Die Blöckemuss immer zentriert bleiben egal wie viele Spalten.

Hier ist ein Stift zur besseren Veranschaulichung:

http://codepen.io/anon/pen/IDsxn

Ist das möglich? Ich fühle mich wie es sicher sein sollte. Ich würde es vorziehen, keine Flexbox zu verwenden, da dies nur 10+ ist und ich 9+ möchte. Ich hätte wirklich gerne eine reine CSS-Lösung, aber wenn Sie mir sagen, dass JS der einzige Weg ist, würde ich das gerne in Aktion sehen.

Als Referenz - ähnliche Fragen, obwohl keine gründlich erklärt wurden:

So richten Sie die letzte linke Reihe / Zeile in einer mehrzeiligen Flexbox aus

CSS - Richten Sie die letzte Bildreihe in einem zentrierten Div nach links aus

Fixieren Sie die Zentrierung der letzten Elementreihe im Flüssigkeitsbehältergitter, sodass sie linksbündig bleibt, während der Behälter zentriert bleibt

Zentrieren Sie mehrere Inline-Blöcke mit CSS und richten Sie die letzte Zeile nach links aus