Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css] wypełnienie div-a kolorem
Forum PHP.pl > Forum > Przedszkole
lukash82
Witam,

Temat wydaje się być prosty, ale chyba coś pokręciłem... Korzystam z bootstrap-a. I muszę w szablonie zrobić 3 kolumny, jedna na 6 kolumn BS i 2 po 3 kolumny BS. Te 2 węższe kolumny będą wypełnione obrazkami dopasowującymi się responsywnie więc nie mogę im zadać konkretnych wymiarów (będę miał mniej więcej 200x200px). Zaś pierwsza kolumna ma być wypełniona kolorem na wysokość obrazków...

Kod jest tu: http://jsfiddle.net/cuw0fr5b/2/

Co prawda, rozjeżdża się ten kawałek ponieważ nie ma dodanego BS, ale idea jest pokazana.

Niestety, jakbym nie kombinował, tak wypełnienie kolorem jest tylko na wysokość linijki z tekstem. Jest mnóstwo przykładów w necie, ale za żadne skarby nie działają u mnie. Już sam nie wiem czy coś źle robię...

PS. Między divami będą przerwy (2-3px) więc wypełnienie kolorem div-a nadrzędnego nie wchodzi w grę.
lukaskolista
Trochę nie ogarniam o co chodzi, ale domyslam się, że o to:
  1. <div class='col-sm-3' style="background-color: black;">
  2. <div class='row'>
  3. <a href='#'><img src='http://images77.fotosik.pl/77/4f3725e48e5856cdmed.jpg' class='img-responsive center-block' alt=''></a>
  4. </div>
  5. </div>
lukash82
Tak, ale chodzi o ten div pierwszy col-sm-6. On ma mieć wypełnienie kolorem na wysokość tych obrazków w 2 pozostałych kolumnach obok.

Normalnie wrzuciłbym jakiegoś div-a nadrzędnego, wlał w niego kolor i wszystko by się ładnie zrobiło. Jednak w projekcie mam delikatne przerwy między tymi 2-oma obrazkami i się sprawa komplikuje. Chociaż podejrzewam, że jest jakiś knif na to tylko czuję kompletną niemoc...:/

Edit:

Zrobiłem tak, ale myślę, że nie jest to eleganckie rozwiązanie:
  1. <div class='col-sm-6'>
  2. <div class='row'>
  3. <div class='fill'>
  4. <a href='#'>Tekst</a>
  5. </div>
  6. </div>
  7. </div>

  1. .fill{
  2. min-height: 184px; /* taka wysokość mają obrazki w kolumnach obok */
  3. background-color: red;}

A potem za pomocą @media będę modyfikował wysokość div-a.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.