Ich habe einen Container-DIV mit flüssiger Breite.
Darin habe ich 4 DIVs, alle 300px x 250px...
Was ich möchte, ist, dass Box 1 links angeordnet wird, Box 4 rechts und Box 2 und 3 gleichmäßig dazwischen angeordnet sind. Ich möchte auch, dass der Abstand flüssig ist, sodass sich der Abstand verkleinert, wenn der Browser verkleinert wird.
Siehe: http://jsfiddle.net/thirtydot/EDp8R/
text-align: justify in Verbindung mit .stretch behandelt die Positionierung.display:inline-block; *display:inline; zoom:1 behebt inline-block für IE6/7, siehe hier.font-size: 0; line-height: 0 behebt ein kleines Problem in IE6.
border: 2px gestrichelt #444; Höhe: 125px; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; / nur zur Demonstration / min-width: 612px; }
.box1, .box2, .box3, .box4 { Breite: 150px; Höhe: 125px; Vertikal ausrichten: Oben; Display: inline-block; *Display: inline; Zoom: 1 }
.stretch { Breite: 100%; Display: inline-block; Schriftgröße: 0; Zeilenhöhe: 0 }
.box1, .box3 { Hintergrund: #ccc }
.box2, .box4 { Hintergrund: #0ff }
Das zusätzliche span (.stretch) kann durch :after ersetzt werden.
Dies funktioniert immer noch in allen Browsern wie bei der obigen Lösung. :after funktioniert nicht in IE6/7, aber sie verwenden sowieso distribute-all-lines, also ist es nicht wichtig.
Siehe: http://jsfiddle.net/thirtydot/EDp8R/3/
Es gibt einen kleinen Nachteil bei :after: Um die letzte Zeile in Safari perfekt funktionieren zu lassen, müssen Sie auf die Leerzeichen im HTML achten.
Speziell, dies funktioniert nicht:
..Und das funktioniert:
..Sie können dies für eine beliebige Anzahl von Kind-divs verwenden, ohne jedem eine boxN Klasse hinzuzufügen, indem Sie
.box1, .box2, .box3, .box4 { ...zu
#container > div { ...Dies wählt jedes div aus, das das erste Kind des div #container ist, und kein anderes darunter. Um die Hintergrundfarben zu generalisieren, können Sie den CSS3 nth-order selector verwenden, obwohl er nur in IE9+ und anderen modernen Browsern unterstützt wird:
.box1, .box3 { ...wird zu:
#container > div:nth-child(odd) { ...Siehe hier für ein jsfiddle Beispiel.
Der einfachste Weg, dies jetzt zu tun, ist mit einem Flexbox:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Der CSS ist dann einfach:
#container {
display: flex;
justify-content: space-between;
}demo: http://jsfiddle.net/QPrk3/
Allerdings, wird dies derzeit nur von relativ neuen Browsern unterstützt (http://caniuse.com/flexbox). Außerdem hat sich die Spezifikation für das Flexbox-Layout ein paar Mal geändert, daher ist es möglich, mehr Browser abzudecken, indem zusätzlich eine ältere Syntax eingebunden wird:
Wenn css3 eine Option ist, kann dies mit der CSS-Funktion calc() erfolgen.
Das Markup ist einfach - eine Gruppe von divs mit einem Container-Element.
Der CSS-Code 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;
}wobei -1px einen IE9+ Calc/Rundungsfehler behebt - siehe hier
Hier sind neben der calc()-Funktion auch Medienabfragen erforderlich.
Die Grundidee besteht darin, für jeden #columns-Zustand eine Medienabfrage einzurichten, in der ich dann calc() verwende, um den rechten Rand auf jedem der Elemente zu berechnen (außer den Elementen in der letzten Spalte).
Das klingt nach viel Arbeit, aber wenn Sie LESS oder SASS verwenden, kann dies recht einfach erledigt werden
(Es kann auch mit normalem CSS gemacht werden, aber dann müssen Sie alle Berechnungen manuell durchführen, und wenn Sie die Breite des Kastens ändern - müssen Sie alles erneut berechnen)
Nachfolgend ein Beispiel für LESS: (Sie können diesen Code kopieren/einfügen hier, um damit zu spielen, [es ist auch der Code, den ich verwendet habe, um die oben genannte fiddle zu generieren])
@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 zunächst eine Kastenbreite und einen Mindestabstand festlegen, den Sie zwischen den Kästen haben möchten.
Damit können Sie ausrechnen, wie viel Platz Sie für jeden Zustand benötigen.
Verwenden Sie dann calc(), um den richtigen Rand zu berechnen, und nth-child, um den rechten Rand von den Kästen in der letzten Spalte zu entfernen.
Der Vorteil dieser Antwort gegenüber der akzeptierten Antwort, die text-align:justify verwendet, besteht darin, dass bei mehr als einer Reihe von Kästen die Kästen in der letzten Reihe nicht 'gerechtfertigt' werden, d.h. Wenn noch 2 Kästen in der letzten Reihe verbleiben - möchte ich nicht, dass der erste Kasten links und der nächste rechts ist - sondern dass die Kästen in der Reihenfolge folgen.
Hinsichtlich Browserunterstützung: Dies funktioniert auf IE9+, Firefox, Chrome, Safari6.0+ - (siehe hier für weitere Details) Ich habe jedoch festgestellt, dass auf IE9+ ein kleiner Fehler zwischen Medienabfragezuständen vorhanden ist. [Wenn jemand weiß, wie man dies beheben kann, würde ich das wirklich gerne wissen :) ] <-- HIER BEHOBEN HIER
Andere Beiträge haben Flexbox erwähnt, aber wenn mehr als eine Reihe von Elementen erforderlich ist, space-between, die Eigenschaft von Flexbox, versagt (siehe das Ende des Beitrags)
Bisher ist die einzige saubere Lösung dafür das
Grundlegend reduziert sich der relevante Code darauf:
ul {
display: grid; /* (1) */
grid-template-columns: repeat(auto-fit, 120px); /* (2) */
grid-gap: 1rem; /* (3) */
justify-content: space-between; /* (4) */
align-content: flex-start; /* (5) */
}1) Mache das Container-Element zu einem Gitter-Container
2) Setze das Gitter mit einer 'automatischen' Anzahl von Spalten - wie benötigt. Dies wird für reaktionsfähige Layouts gemacht. Die Breite jeder Spalte beträgt 120px. (Beachte die Verwendung von auto-fit (im Gegensatz zu auto-fill), das (für ein 1-Reihen-Layout) leere Spuren auf 0 zusammenfallen lässt - und den Elementen erlaubt, sich zu dehnen, um den verbleibenden Platz einzunehmen. (schau dir diese Demo an, um zu sehen, worüber ich spreche)).
3) Setze Lücken für die Rasterzeilen und -spalten - hier, da ein 'space-between' Layout gewünscht ist - wird der Abstand tatsächlich ein minimale Lücke sein, da er entsprechend wachsen wird.
4) und 5) - Ähnlich wie bei Flexbox.
body {
margin: 0;
}
ul {
display: grid;
grid-template-columns: repeat(auto-fit, 120px);
grid-gap: 1rem;
justify-content: space-between;
align-content: flex-start;
/* langweilige Eigenschaften: */
list-style: none;
width: 90vw;
height: 90vh;
margin: 2vh auto;
border: 5px solid green;
padding: 0;
overflow: auto;
}
li {
background: tomato;
height: 120px;
}Derzeit unterstützt von Chrome (Blink), Firefox, Safari und Edge! ... mit teilweiser Unterstützung von IE (Siehe diesem Beitrag von Rachel Andrew)
Flexbox's space-between Eigenschaft funktioniert gut für eine Reihe von Elementen, aber wenn sie auf einen Flex-Container angewendet wird, der seine Elemente umbricht (mit flex-wrap: wrap) - versagt sie, da man keine Kontrolle über die Ausrichtung der letzten Reihe von Elementen hat; die letzte Reihe wird immer gerechtfertigt sein (normalerweise nicht das, was man möchte)
Zur Demonstration:
body {
margin: 0;
}
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: flex-start;
list-style: none;
width: 90vw;
height: 90vh;
margin: 2vh auto;
border: 5px solid green;
padding: 0;
overflow: auto;
}
li {
background: tomato;
width: 110px;
height: 80px;
margin-bottom: 1rem;
}Codepen (Ändern Sie die Größe, um zu sehen, worüber ich spreche)
Weiterführende Informationen zu CSS Grids:
Dies hat für mich mit 5 Bildern in unterschiedlichen Größen funktioniert.
Dies funktioniert aufgrund von justify-content: space-between und wird in einer Liste horizontal angezeigt.
In CSS
#container {
display: flex;
justify-content: space-between;
}
#container ul li { display: inline; list-style-type: none; }In HTML
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
