Flüssige Breite mit gleichmäßig verteilten DIVs

Question

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.

Answer 1

In jQuery könnten Sie direkt auf das Elternteil abzielen.

DAS IST NÜTZLICH, WENN SIE NICHT EXAKT WISSEN, WIE VIELE KINDER DYNAMISCH HINZUGEFÜGT WERDEN ODER WENN SIE EINFACH NICHT DEREN ANZAHL HERAUSFINDEN KÖNNEN.

var tWidth=0;

$('.children').each(function(i,e){
tWidth += $(e).width();

///Beispiel: Wenn die Kinder ein padding-left von 10px haben;..
//Sie könnten stattdessen machen:
tWidth += ($(e).width()+10);

})
$('#parent').css('width',tWidth);

Dadurch kann das Elternteil horizontal wachsen, während die Kinder hinzugefügt werden.

HINWEIS: Dies setzt voraus, dass die '.children' eine definierte Breite und Höhe haben

Hoffe, das hilft.

Answer 2

Wenn Sie die Anzahl der Elemente pro "Zeile" und die Breite des Containers kennen, können Sie einen Selektor verwenden, um den Elementen, die Sie benötigen, einen Rand hinzuzufügen, um einen justierten Look zu verursachen.

Ich hatte Reihen von drei divs, die ich justieren wollte, also habe ich verwendet:

.tile:nth-child(3n+2) { margin: 0 10px }

dies ermöglicht es dem mittleren div in jeder Zeile, einen Rand zu haben, der das 1. und 3. div an die äußeren Ränder des Containers zwingt

Auch großartig für andere Dinge wie Rahmen, Hintergrundfarben usw.