DIV - jeden pod drugi

0

Witam.
O to strona:
http://demo.xvauctions.bordeux.net/auction/1/

Jak widać, detale o przedmiocie są widoczne w taki sposób:
4f0405618edba.png

Jak zmusić przeglądarkę poprzez CSS, by nie zostawiała pustych miejsc, i całość wyglądała mniej więcej tak:
4f0405d8268a9.png

column-count chcę zostawić w ostateczności.

1

bez ruszania html chyba nie da rady.
zrób sobie dwa divy otaczające - one niech floatują, i w nie pakuj sobie te divy z blokami informacji.

1

Albo da się to zrobić prosto, albo jednak nie łapię o co chodzi...

Niech ten drugi div (ten z etykietą 'Koszt przesyłki') ma float: right. I tyle.

Trzeba tylko namierzyć jakoś ten element, tj. napisać odpowiedni selektor. Najłatwiej byłoby użyć jakiejś klasy czy ID, ale w HTML-u ich nie ma. Jeśli nie możesz ich dodać, musisz kombinować.

W CSS3 to prościzna (:nth-child). Ale żeby zachować większą kompatybilność, można użyć selektora "rodzeństwa", czyli plusika, który działa nawet w IE7:

.xvauction-details > div + div {
  float: right;
}

/* przywracamy float: left dla kolejnych divów */
.xvauction-details > div + div + div {
  float: left;
}

Zauważ też, że tam nad każdym divem jest jednopikselowy margines. Jeśli go nie chcesz, wyzeruj margin-top dla elementów .xvauction-details > div.

0

obiekty są dynamiczne, użytkownik w panelu admina może dodawać inne pola, np. mapke, krótki opis. Nie wiem czy akurat to będzie duży czy mały div.

1

Tzn? bo teraz nie łapię..

0

Chodzi o to, że "Koszt przesyłki" może też być na końcu (to się zmienia, według ilości pól w danej kategorii), więc nie mogę przewidzieć że akurat ten szeroki div "Koszt przesyłki" jest po prawej stronie, czy też po lewej, czy też w ogóle istnieje. Nie mogę też przewidzieć czy ten div jest duży (teraz ma wysokość 100px, a może mieć 20px, jak reszta). Jest dynamiczny, nie mogę jasno ustawić akurat dla niego właściwości. Takich pól o różnej wysokości może być kilkadziesiąt.

0

taka sytuacja może też się zdarzyć:

http://jsfiddle.net/bordeux/fYKJ8/2/

Czyli chodzi mi o załatanie białej dziury, nie ustawiając na sztywno innych reguł dla poszczególnych div'ów w div.alldiv

1

No a to co mówił bswierczynski: http://jsbin.com/upogok/edit#html,live ?

0

Źle zrozumiałem bswierczynski. W takim przypadku, ten sposób rozwiązał problem. Dziękuje za odpowiedzi!

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.