Wenn CSS3 eine Option ist, kann dies mit der CSS- calc()Funktion erfolgen.
Fall 1: Ausrichten von Feldern in einer einzelnen Zeile ( FIDDLE )
Markup ist einfach - eine Reihe von Divs mit einem Containerelement.
CSS sieht folgendermaßen aus:
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
wo -1px , um einen IE9 + Calc / Rounding-Fehler zu beheben - siehe hier
Fall 2: Ausrichten von Feldern in mehreren Zeilen ( FIDDLE )
Hier sind neben der calc()Funktion media queriesauch notwendig.
Die Grundidee besteht darin, eine Medienabfrage für jeden # columns-Status einzurichten, in der ich dann calc () verwende, um den rechten Rand für jedes der Elemente (mit Ausnahme der Elemente in der letzten Spalte) zu ermitteln.
Das klingt nach viel Arbeit, aber wenn Sie WENIGER oder SASS verwenden, kann dies ganz einfach durchgeführt werden
(Es kann immer noch mit normalem CSS durchgeführt werden, aber dann müssen Sie alle Berechnungen manuell durchführen. Wenn Sie dann Ihre Boxbreite ändern, müssen Sie alles erneut ausarbeiten.)
Unten ist ein Beispiel mit WENIGER: (Sie können diesen Code hier kopieren / einfügen, um damit zu spielen. [Es ist auch der Code, mit dem ich die oben erwähnte Geige generiert habe.])
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
Grundsätzlich müssen Sie also zunächst eine Boxbreite und einen Mindestabstand zwischen den Boxen festlegen.
Damit können Sie herausfinden, wie viel Speicherplatz Sie für jeden Status benötigen.
Verwenden Sie dann calc (), um den rechten Rand zu berechnen, und nth-child, um den rechten Rand aus den Feldern in der letzten Spalte zu entfernen.
Der Vorteil dieser Antwort gegenüber der akzeptierten Antwort, die verwendet text-align:justifywird, besteht darin, dass bei mehr als einer Reihe von Feldern die Felder in der letzten Zeile nicht "gerechtfertigt" werden, z. B.: Wenn in der letzten Zeile noch 2 Felder vorhanden sind - I. Ich möchte nicht, dass das erste Feld links und das nächste rechts angezeigt wird, sondern dass die Felder der Reihe nach aufeinander folgen.
In Bezug auf die Browserunterstützung : Dies funktioniert unter IE9 +, Firefox, Chrome, Safari6.0 + - (siehe hier für weitere Details). Ich habe jedoch festgestellt, dass unter IE9 + ein gewisser Fehler zwischen den Status der Medienabfrage besteht. [Wenn jemand weiß, wie man das behebt, würde ich es gerne wissen :)] <- HIER BEHOBEN
display:inline-block;statt schweben?