Pomoc z CSS - ustawienie kilku divów

Question

Witam,

Wyświetlam na stronie dane z bazy mysql za pomocą pętli foreach.

Chcę je ustawić tak jak na obrazku:

Tzn:

7 pól z bazy po lewej z szerokością 25%, jedno pole po lewej 50% i jedno z prawej 50%. Wysokość pól 50% jest różna.

W tej chwili ostylowałem to tak, że sprawdzam ID danych pól w foreach i dla divów dodaję różne klasy - niebieskiego wyświetlam klasę "width50r", dla czerwonego "width50l", dla zielonych "width25".

CSS poniżej:

.width_25 {
	display: block;
	float: left;
	width: 25%;
}

.width_50l {
	display: block;
	float: left;
	width: 50%;
}

.width_50r {
	display: block;
	float: right;
	width: 50%;
}

Wszystko byłoby ok, ale przy mniejszej zawartości pola niebieskiego cały układ się rozjeżdża. Dodatkowo, pól zielonych może być max. 7 ale może być też mniej.

Jak to zrobić żeby się nie rozjeżdżało bez względu na zawartość diva?

Answer 1

Przerzuć się na flexboxa i nie korzystaj z float. Do takiego rozwiązania jakie chcesz to nawet CSS Grid by się bardziej nadał niż Flexbox. Float już raczej się nie stosuje, chyba że wsparcie projektu musi być bardzo wstecz.

Co do zielonych pól, jeżeli nie ma ich 7 to po prostu może resztę uzupełnić pustymi polami, które są w innym (neutralnym) stylu, np. kolorze tła?

 

Pytanie też w jaki sposób te pola są oznaczane? Zawsze w tej samej kolejności, np. na początku czerwone, później niebieskie i na sam koniec zielone? Czy może jest to w sposób losowy lub zależny od czegoś?