"Oplatanie" zdjęcia tekstem Opcje

[trifek]

Witam serdecznie,
Mam taką stronę: http://serwer1356363.home.pl/test/szablon/index.html
Strona jest responsywna.

Mam na niej 2 bloki tekstu i zdjęcie po prawej stronie.
Umieściłem te 2 bloki tekstu w 2 osobnych divach/kolumnach.

Problemem jest to, że jak ktoś w przyszłości w CMS wprowadzi dużą ilość tekstu to tekst będzie trzeba w jakiś sposób dzielić pomiędzy te 2 DIVy.

Wie ktoś może jak przerobić ten mój kod, żeby tekst wprowadzony z lewej strony - automatycznie "oplatał zdjęcie" i pojawiał się też z prawej strony (w sposób "ciągły")?

Bardzo proszę o pomoc
Trifek

[Niree]

Możesz pobawić się w CSS właściwość content: "tekst";
W PHP sprawdzasz, czy $tekst w pierwszym divie wynosi ileś tam znaków, jeśli przekracza, to ucinasz tekst po iluś znakach, a drugą część wrzucasz w drugim divie, w content: "$tekst[1]".

Przykład:

[PHP] pobierz, plaintext 
//łączenie z bazą i wyciąganie przykładowej treści
$tekst = $baza['content'];
 
if(strlen($tekst) > 150))
{
$text = str_split($tekst, 150);
echo '<style>#div1 {color: #000; content: "'.$text[0].'";} #div2 {color: #000; content: "'.$text[1].'";}</style>';
}
else
{
echo '<style>#div1 {color: #000; content: "'.$tekst.'";}</style>';
}
 
<div id="div1"></div><div id="div2"></div>/// reszta kodu html, treść ustawi css z powyższego warunku
[PHP] pobierz, plaintext 

W tym divie usuwasz treść i dajesz po prostu sam div z ustawionym identyfikatorem, treść ustawi CSS.

Ten post edytował Niree 12.12.2016, 11:10:22

[trifek]

Też nad tym myślałem, tylko nie wydaje mi się to za dobrym rozwiązaniem (np. jak zdjęcie będzie ciut mniejsze/większe) - to, to liczenie nie będzie do końca dobre (IMG:style_emoticons/default/sad.gif)
Poza tym, łamanie tekstu po ilości znaków może uciąć wyraz w połowie (IMG:style_emoticons/default/sad.gif)

[Niree]

Rozmiar zdjęcia możesz ograniczyć min-width i max-width.

Ja tylko zasugerowałem jedno z rozwiązań, nikt Ci nie każe łamać tekstu w połowie (IMG:style_emoticons/default/tongue.gif) W google masz pełno skryptów na łamanie stringa bez rozdzielania wyrazu.
http://stackoverflow.com/questions/1233290...not-a-character

[trifek]

dziękuję bardzo za pomoc (IMG:style_emoticons/default/smile.gif) )

a gdybym na stronie miał zamiast 2 - np. 3 takie "boxów" tekstowych to jak by to wyglądało?



W czym jest lepsze/gorsze Twoje rozwiązanie od "wkładania" tekstu bezpośrednio w DIV?(IMG:style_emoticons/default/smile.gif)

[Niree]

Ilość divów nie ma znaczenia. I tak mają określony limit wyrazów/znaków i musisz to wziąć pod uwagę pisząc warunek.

Generalnie można wrzucić tekst bezpośrednio do diva, ale jeżeli mówimy o responsywności, no to później możesz cudować od razu w tym CSS z @media itp., zmniejszać czcionkę, ustawiać szerokość i inne cuda.