Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [html][css] wypełnienie div-a kolorem, wg wysokości obrazka
lukash82
post 16.11.2015, 10:18:47
Post #1





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

Ostrzeżenie: (0%)
-----


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ę.
Go to the top of the page
+Quote Post
lukaskolista
post 16.11.2015, 10:54:20
Post #2





Grupa: Zarejestrowani
Postów: 872
Pomógł: 94
Dołączył: 31.03.2010

Ostrzeżenie: (0%)
-----


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>
Go to the top of the page
+Quote Post
lukash82
post 16.11.2015, 11:00:15
Post #3





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

Ostrzeżenie: (0%)
-----


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.

Ten post edytował lukash82 16.11.2015, 11:27:56
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 30.04.2025 - 09:11