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.

<div id="property_pictures_field">
<div class="label">
</div>
<div class="control">
</div>
<div class='tip'>
</div>
</div>

Oto co wyświela mi FireFox o wspomnianym trzecim divie:

element {
color: blue;
}
div.tip {
float: left;
color: blue;
text-align: left;
vertical-align: middle;
}
.tip {
color: blue;
margin-top: 5px;
margin-bottom: 5px;
}
body {
font-family: 'Arial';
font-size: smaller;
color: #000000;
}

Natomiast o drugim:

element {
}
div.control {
float: left;
}
body {
font-family: 'Arial';
font-size: smaller;
color: #000000;
}

Proszę o podpowiedź co zrobić, żeby div.tip wyświetlał się z prawej
strony div.control, tzn. obok a nie pod.

do góry

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ć?

do góry

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

do góry

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
--
Wojtek Gapiński
http://www.phprogramista.pl

do góry

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

do góry

W dniu 2017-08-18 o 16:38, Wojtek Gapiński pisze:
> 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.

Moja strona jest responsywna ale nie używam żadnego frameworka, tylko
media queries. Czy ktoś wie jak to zrobić bez frameworka?
Nie ma sensu ustawiać szerokości div.tip na stałą, chyba że bym w
JavaScripcie liczył max-width = szerokość div nadrzędnego - szerokość
div.label - szerokość div.control. Co o tym sądzicie?

do góry

Dnia Fri, 18 Aug 2017 10:11:19 +0200, Jivanmukta napisał(a):

> Proszę o podpowiedź co zrobić, żeby div.tip wyświetlał się z prawej
> strony div.control, tzn. obok a nie pod.

Musisz określić szerokości, najlepiej procentowo (i nie zapomnij o trybie
border-box).

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

W dniu 2017-08-18 o 21:51, Borys Pogoreło pisze:
> Dnia Fri, 18 Aug 2017 10:11:19 +0200, Jivanmukta napisał(a):
>
>> Proszę o podpowiedź co zrobić, żeby div.tip wyświetlał się z prawej
>> strony div.control, tzn. obok a nie pod.
>
> Musisz określić szerokości, najlepiej procentowo (i nie zapomnij o trybie
> border-box).
>
Dzięki Borys, działa!

do góry

W dniu 2017-08-19 o 10:00, Jivanmukta pisze:
> W dniu 2017-08-18 o 21:51, Borys Pogoreło pisze:
>> Dnia Fri, 18 Aug 2017 10:11:19 +0200, Jivanmukta napisał(a):
>>
>>> Proszę o podpowiedź co zrobić, żeby div.tip wyświetlał się z prawej
>>> strony div.control, tzn. obok a nie pod.
>>
>> Musisz określić szerokości, najlepiej procentowo (i nie zapomnij o trybie
>> border-box).
>>
> Dzięki Borys, działa!
>

niepojęte,

czy już jest jakiś parametr do rozpychania diva?

próbowałem znaleźć opis, ale wymiękam:
"Za pomocą wartości border-box właściwości box-sizing możemy sprawić, że
właściwości CSS określające rozmiar obszaru zawartości interesującego
nas elementu HTML nie będą określały rozmiaru obszaru zawartości
interesującego nas elementu HTML, lecz będą określały rozmiar
interesującego nas elementu HTML.
"

do góry

W dniu 2017-08-19 o 12:36, w systemie siła 'POPIS/EU pisze:
> W dniu 2017-08-19 o 10:00, Jivanmukta pisze:
>> W dniu 2017-08-18 o 21:51, Borys Pogoreło pisze:
>>> Dnia Fri, 18 Aug 2017 10:11:19 +0200, Jivanmukta napisał(a):
>>>
>>>> Proszę o podpowiedź co zrobić, żeby div.tip wyświetlał się z prawej
>>>> strony div.control, tzn. obok a nie pod.
>>>
>>> Musisz określić szerokości, najlepiej procentowo (i nie zapomnij o
>>> trybie
>>> border-box).
>>>
>> Dzięki Borys, działa!
>>
>
> niepojęte,
>
> czy już jest jakiś parametr do rozpychania diva?
>
> próbowałem znaleźć opis, ale wymiękam:
> "Za pomocą wartości border-box właściwości box-sizing możemy sprawić, że
> właściwości CSS określające rozmiar obszaru zawartości interesującego
> nas elementu HTML nie będą określały rozmiaru obszaru zawartości
> interesującego nas elementu HTML, lecz będą określały rozmiar
> interesującego nas elementu HTML.
> "
Ja tego nie rozumiem, zrobiłem "na pałę":

.tip {
...
box-sizing: border-box;
}
div.tip {
width: 50%;
float: left;
...
}

i działa.

do góry