Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Szerokość diva dopasowująca się do obrazka
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
404
Dzień dobry smile.gif

Mam następujący problem:
  1. <div class="image">
  2. <img src="http://images.pl/image.php?thumb&pId=100000" alt="image">
  3. <p>This is example!</p>
  4. </div>

Obrazki są wczytywane dynamicznie, mają też różne rozmiary, tekst również. Tekst ma być nałożony na obrazek. Problem w tym, jak zrobić żeby ten paragraf miał szerokość obrazka, tzn. aby tekst nie wyjeżdżał poza obrazek?
Oczywiście mogę, przy wrzucaniu pobierać szerokość obrazka, zapisywać go do bazy i wtedy:
  1. <p style="width:<?php echo $image['image_width']; ?>">This is example!</p>

...jednak wolałbym rozwiązać ten problem za pomocą stylów.

Proszę o pomoc.
dudek90
Możesz to zrobić w JQuery i wtedy nic nie będziesz musiał zapisywać do bazy. smile.gif
404
Chyba nie mam innego wyboru smile.gif
SpiJay
Dudek90, co to za rozwiązanie...
Pewnie, że się da.

  1. <div style="display: inline-block; background: red; position: relative;">
  2. <div style="width: 100%; background: black; position: absolute; bottom: 0; text-align: center;">test</div>
  3. <img src="http://th05.deviantart.net/fs29/200H/f/2009/242/3/d/Dream_Eye_by_SpiJay_by_SpiJay.jpg"/>
  4. </div>


wówczas div o parametrze display: inline-block; przyjmuje szerokość najszerszego elementu wewnątrz, a w naszym przypadku jest to obraz o jakiejś NIEOKREŚLONEJ szerokości, co w rezultacie daje nam przystosowanie szerokości do każdego obrazu wewnątrz tego diva.
Div z position absolute i width: 100%; jest divem opływającym, który ma maksymalną szerokość względem diva z inline-block.

Myślę, że pomogłem,
SpiJay.com
404
Tego właśnie potrzebowałem, dzięki smile.gif
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.