eGospodarka.pl

eGospodarka.plGrupypl.comp.www › div float
Ilość wypowiedzi w tym wątku: 14

  • 1. Data: 2017-08-18 10:11:19
    Temat: div float
    Od: Jivanmukta <j...@p...onet.pl>

    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.


  • 2. Data: 2017-08-18 11:39:51
    Temat: Re: div float
    Od: Jivanmukta <j...@p...onet.pl>

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


  • 3. Data: 2017-08-18 11:54:33
    Temat: Re: div float
    Od: Jivanmukta <j...@p...onet.pl>

    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


  • 4. Data: 2017-08-18 13:21:51
    Temat: Re: div float
    Od: Wojtek Gapiński <w...@w...I.TO.TEZ.pl>

    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


  • 5. Data: 2017-08-18 16:38:58
    Temat: Re: div float
    Od: Wojtek Gapiński <w...@w...I.TO.TEZ.pl>

    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


  • 6. Data: 2017-08-18 18:04:50
    Temat: Re: div float
    Od: Jivanmukta <j...@p...onet.pl>

    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?


  • 7. Data: 2017-08-18 21:51:01
    Temat: Re: div float
    Od: Borys Pogoreło <b...@p...edu.leszno>

    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


  • 8. Data: 2017-08-19 10:00:02
    Temat: Re: div float
    Od: Jivanmukta <j...@p...onet.pl>

    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!


  • 9. Data: 2017-08-19 12:36:10
    Temat: Re: div float
    Od: w systemie siła 'POPIS/EU <N...@g...pl>

    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.
    "


  • 10. Data: 2017-08-19 15:31:58
    Temat: Re: div float
    Od: Jivanmukta <j...@p...onet.pl>

    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.

strony : [ 1 ] . 2



Szukaj w grupach

Szukaj w grupach

REKLAMA

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo:

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką Prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.