[HTML][CSS]3x div z img w jednej linii, cała szer. ekranu, Jak zrobić? Opcje

[dzinsy123]

Witam,

wiem, że można to zrobić kilkoma sposobami, nawet niektórymi ładnie to wygląda, ale chcę zapytać jak najlepiej to zrobić:

- chcę mieć 3 divy na stronie w 1 linii
- wszystkie 3 muszą zajmować łącznie całą szerokość strony (każdy tej samej szerokości)
- każdy będzie miał w tle background-image (tych samych wymiarów), a w treści jakiś tekst
- cały box musi być poprawny składniowo html5 css3
- blok musi być responsywny tj. obrazki w zależności od wymiarów mają się zmniejszać (zawartość też)

dzięki

PS - tak znalazłem różne rozwiązania, ale albo są nie-responsywne, albo dziwne składniowo

[dzinsy123]

już lepiej, dziękuję

teraz tylko powiedz czy pozycjonować divy margin-left i dać parentowi display:inline? to będą 3 różne divy.


2 - niestety ale obrazki zachowują stałe rozmiary. da się żeby proporcjonalnie się zmniejszały gdy zmieniam zoom strony?

[crocodillo]

już lepiej, dziękuję

teraz tylko powiedz czy pozycjonować divy margin-left i dać parentowi display:inline? to będą 3 różne divy.


2 - niestety ale obrazki zachowują stałe rozmiary. da się żeby proporcjonalnie się zmniejszały gdy zmieniam zoom strony?

Bez użycia js można skalować, ale bez zachowania proporcji, chyba że użyjesz <img> jako tła

http://jsfiddle.net/fgz27yzu/1/