Wie platziere ich viele Inline-Block-Elemente?

Question

Ist es möglich, viele Elemente in einem div mit veränderbarer Breite gleichmäßig zu platzieren.

Hier ist not working example. Wenn wir text-align verwenden: center; Elemente werden zentriert, aber Rand: 0 auto; funktioniert nicht. Ich möchte wie + Zentrum etwas erreichen rechtfertigen:

|..<elem>..<elem>..<elem>..<elem>..|  // for one container width 
|..<elem>..<elem>..<elem>..|    // for smaller container width 
|....<elem>....<elem>....|     // even smaller container 

Container werden Benutzer resizable. Ein Bild sagt mehr als 1000 Worte:

Container (roter Kasten) Breite: 100%; So kann der Benutzer die Größe ändern (Browserfenster, js, was auch immer).
< -> stellen gerade Leerzeichen dar. In der zweiten Reihe < -> sind größer, weil mehr Platz ist. Ich war in der Lage zu fälschen es mit:

text-align:center; 
word-spacing:3em; // but any fixed value looses proportion 

Answer 1

ich vor kurzem eine sehr clevere Technik gelesen, genau das zu tun, was Sie fragen.

Kurz gesagt, Sie müssen nur text-align:justify; auf dem Container-Element verwenden, um dies zu erreichen, in Verbindung mit einem extra unsichtbaren Block am Ende.

Dies funktioniert, weil inline-block Elemente als Teil des Textinhalts gesehen werden, jeder effektiv ein einzelnes Wort ist.

Mit justify werden die Wörter in Ihrem Text so verteilt, dass sie die gesamte Breite des Elements mit einem zusätzlichen Leerzeichen zwischen den Wörtern ausfüllen. Für inline-block Elemente bedeutet dies, dass sie mit gleichmäßigen Abständen zwischen ihnen beabstandet sind.

Ich erwähnte einen extra unsichtbaren Block am Ende. Dies ist erforderlich, da text-align:justify die letzte Textzeile nicht normalisiert. Für normalen Text ist das genau das, was Sie wollen, aber für die Ausrichtung von inline-block Boxen möchten Sie, dass alle ausgerichtet sind.

Die Lösung besteht darin, ein zusätzliches unsichtbares Element mit 100% Breite am Ende der Liste der inline-block Elemente hinzuzufügen. Dies wird effektiv die letzte Zeile des Textes, und somit wird die justify Technik für den Rest Ihrer Blöcke funktionieren.

Sie können den Pseudo-Selektor :after verwenden, um das unsichtbare Element zu erstellen, ohne dass Sie das Markup ändern müssen.

Hier ist eine aktualisierte Version Ihres jsFiddle zu demonstrieren: http://jsfiddle.net/ULQwf/298/

Und hier ist das Original-Artikel, die es näher erklärt: http://www.barrelny.com/blog/text-align-justify-and-rwd/

[EDIT] Eine letzte Update nach dem Bild, das Sie sehen, Habe die Frage hinzugefügt. (Ich habe keine bessere Antwort, aber einige zusätzliche Gedanken, die nützlich sein könnten).

Ideal, was Sie hier brauchen, ist ein :last-line Selektor. Dann könnten Sie text-align:justify den Haupttext und text-align:center die letzte Zeile. Das würde tun, was du willst.

Leider :last-line ist kein gültiger Selektor (:first-line ist, aber nicht :last-line), so dass das Ende dieser Idee ist.

Ein etwas mehr hoffnungsvoller Gedanke ist text-align-last, die tut als eine Funktion existieren. Dies könnte genau das tun, was Sie wollen:

text-align:justify; 
text-align-last:center; 

Perfekt.

Außer dass es nicht Standard ist und sehr eingeschränkte Browser-Unterstützung hat.

Sie können read about here on MDN.

Ich denke, als letztes Mittel könnte es eine Option für Sie sein, wenn Sie mit nur teilweise Browserunterstützung leben können. Es würde zumindest bekommen, was Sie für einige Ihrer Benutzer wollen. Aber das ist nicht wirklich sinnvoll.

Mein Bauchgefühl ist jedoch, dass dies so nah wie Sie bekommen werden. Liebend nah an dem, was Sie wollen, aber nicht ganz da. Ich hoffe, dass ich falsch liege, aber ich werde überrascht sein. Schade aber, denn ich würde es für eine vollkommen logische Sache halten wollen.

Answer 2

Ich arbeitete an Ihrem Beispiel, müssen Sie eine Kombination von Block/Inline-Stil, da die Rechtfertigung allein nur für Inline (Text) arbeiten.

div{ 
    width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */ 
    border:1px red solid; 
    text-align:justify; /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */ 

} 
div span{ /* I worked with your example you may use a class */ 
    width:60px; 
    border:1px yellow solid; 
    display: inline-block; /* Inline-block */ 
    position: relative; /* relative to container div*/ 
} 

div:before{ 
    content: ''; /* position for block element*/ 
    display: block; /* the block part for the last item*/ 
    width: 100%; 
} 

div:after { 
    content: ''; 
    display: inline-block; /* inline-block for the first (and middle elements) */ 
    width: 100%; 
} 

Answer 3

Wenn ein anderen Ansatz versucht, in der Geige sieht ziemlich ähnlich zu dem Bild, aber der Raum in beiden Linien festgelegt, sondern die Elemente ineinander greifen.

div{ 
    width:250px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */ 
    border:1px red solid; 
    text-align:center; /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */ 
} 
div span{ /* I worked with your example you may use a class */ 
    width:60px; 
    float:justify; 
    border:1px yellow solid; 
    display: inline-block; /* Inline-block */ 
     margin-left:2%; 
    margin-right:2%; 

}