Article View: pl.comp.www
Article #408590Re: div float
From: Wojtek Gapiński
Date: Fri, 18 Aug 2017 14:38
Date: Fri, 18 Aug 2017 14:38
42 lines
2846 bytes
2846 bytes
W dniu 18-08-2017 o 11:54, Jivanmukta pisze: > W dniu 2017-08-18 o 11:39, Jivanmukta pisze: >> W dniu 2017-08-18 o 13:21, Wojtek Gapiński pisze: >>> W dniu 18-08-2017 o 10:11, Jivanmukta pisze: >>>> Mam na stronie diva zawierającego trzy divy, które chciałbym >>>> wyświetlać obok siebie. Z nieznanego mi powodu ostatni wyświetla się >>>> poniżej dwóch poprzednich (które wyświetlają się prawidłowo, tzn. obok >>>> siebie). Drugi div kończy się mniej więcej w połowie szerokości okna. >>>> >>> [...] >>>> Proszę o podpowiedź co zrobić, żeby div.tip wyświetlał się z prawej >>>> strony div.control, tzn. obok a nie pod. >>> >>> Stawiam, że nie mieści się na szerokość ten trzeci <div>, dlatego >>> wyświetla się poniżej. >>> Sprawdź szerokość elementu nadrzędnego (czyli <div >>> id="property_pictures_field"> pamiętając o paddingach, a następnie >>> zsumuj całkowite szerokości wszystkich trzech elementów wewnątrz niego >>> (czyli div-y o klasach "label", "control" i "tip"). Całkowite, czyli z >>> marginesami i paddingami. I zobacz, co jest większe. >>> >>> pozdrawiam >> >> Trzeci div (div.tip) zawiera tylko tekst. Jeśli skrócę tekst np. do >> jednego wyrazu, to wyświetla mi się div.tip dobrze (z prawej strony). >> Chciałbym, żeby mój tekst w div.tip został złamany na wielowierszowy i >> wyświetlał się z prawej strony. Jak to zrobić? > > dodanie dla div.tip stylu "word-wrap: break-word;" nie pomaga div będzie się rozciągał w zależności od zawartości. Możesz mu ustawić stałą szerokość albo max-width. Ale jeśli strona ma być responsywna, to musiałbyś to ułożyć inaczej, np. skorzystać z metody użytej w bootstrapie albo podobnym frameworku. Opcjonalnie możesz wstawiać znaki podziału wiersza w tekście - tam, gdzie mają być zawijane wiersze, ale to raczej toporne rozwiązanie. pozdrawiam -- Wojtek Gapiński http://www.phprogramista.pl
Technical Details
Message-ID:
<on6u60$1qqp$1@gioia.aioe.org>Path:
mbox-mo1.pugleaf.net!news-archive.icm.edu.pl!news.icm.edu.pl!news.nask.pl!news.nask.org.pl!news.unit0.net!news.mixmin.net!aioe.org!.POSTED!not-for-mailReferences:
<on6eg7$7d4$1@news.icm.edu.pl> <on6ikd$17s2$1@gioia.aioe.org> <on6jm8$t2c$1@news.icm.edu.pl> <on6khq$laj$1@news.icm.edu.pl>Show Full Headers
Complete Article Headers
Path: mbox-mo1.pugleaf.net!news-archive.icm.edu.pl!news.icm.edu.pl!news.nask.pl!news.nask.org.pl!news.unit0.net!news.mixmin.net!aioe.org!.POSTED!not-for-mail From: Wojtek Gapiński <wojtas_g.WYTNIJ.TO@wp.I.TO.TEZ.pl> Newsgroups: pl.comp.www Subject: Re: div float Date: Fri, 18 Aug 2017 16:38:58 +0200 Organization: Aioe.org NNTP Server Lines: 42 Message-ID: <on6u60$1qqp$1@gioia.aioe.org> References: <on6eg7$7d4$1@news.icm.edu.pl> <on6ikd$17s2$1@gioia.aioe.org> <on6jm8$t2c$1@news.icm.edu.pl> <on6khq$laj$1@news.icm.edu.pl> NNTP-Posting-Host: W6O+i92HF574szyF6hy2ug.user.gioia.aioe.org Mime-Version: 1.0 X-Complaints-To: abuse@aioe.org User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:52.0) Gecko/20100101 Thunderbird/52.3.0 X-Notice: Filtered by postfilter v. 0.8.2 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit