2013-03-04 10 views
17

Chcę zrobić coś takiegoZawijanie tekstu wokół obrazu z wcięciem i uzasadnić

enter image description here Problemem jest to, że muszę p mieć wcięcia i uzasadnić jako wyrównanie. Mogłem przenieść obraz po lewej stronie, a następnie ustawić wyświetlanie h3 i p w linii, ale nie jestem w stanie ustawić wcięcia, a co ważniejsze, aby uzasadnić tekst. Ktoś ma jakieś pomysły, jak rozwiązać ten problem? Dzięki!

Odpowiedz

32
img { 
    float: left; 
    margin: 0 20px 20px 0; 
} 

p { 
    text-align: justify; 
    text-indent: 2em; 
} 

Oto skrzypce: http://jsfiddle.net/9VkQR/

+0

Próbuję dostosować CMS, gdzie nie mogę kontrolować strukturę HTML. To, co mam, to otwierający tag P. IMG znajduje się w P, a rzeczywista treść (tekst) podąża za tagiem IMG. Powoduje to, że pierwszy wiersz tekstu znajduje się obok dolnej krawędzi obrazu, a nie jest owinięty wokół niego. Jeśli użyję vertical-align: top na IMG, to jedna linia tekstu pojawi się obok obrazu, zanim reszta spadnie poniżej. Jak uzyskać wiele linii tekstu obok obrazu, zaczynając od góry obrazu? Mogę zastosować tylko CSS - nie zmieniać struktury HTML. – youcantryreachingme

+1

Problem z wyrównaniem w lewo, jeśli jest wyższy od akapitu, obraz wyleje się z elementu div. Jak temu zapobiec? –