Ustawienie obrazka obok tekstu

pytanie zadane 16 grudnia 2020 w HTML i CSS przez AgentTecza Obywatel (1,810 p.)

Zastanawiam się czemu tekst nie ustawia mi się po prawej stronie obrazka jakie jest na to rozwiązanie

KOD HTML:

 <img src="css/handshake-220233_640.jpg" alt="" style="float: left; margin-left: 300px; margin-top: 150px;"/>
                    <p class = "cro-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu faucibus mauris. Quisque luctus gravida libero commodo bibendum. Maecenas non semper enim. Quisque id lobortis ante. Aenean ut posuere lacus, nec suscipit ante. Morbi sit amet ante nec mauris vestibulum maximus at at dolor. Sed in tempor ligula. Donec vel lobortis turpis. In lobortis eget ipsum eu ullamcorper. Sed a condimentum dui. Nam placerat quam eget mollis placerat. Ut congue tortor in quam aliquet, in maximus urna aliquet. Nunc est ex, vestibulum id metus non, feugiat varius est. Cras id velit quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        </p>

CSS :

.cro-text{
    float: right;
}

ZDJĘCIE ZE STRONY:

Z góry dzięki :D

1	komentarz 16 grudnia 2020 przez CubeStorm Pasjonat (15,020 p.) Ten kod wykorzystujesz do nauki czy chcesz opublikować na stronie? Float'y to dość przestarzała metoda, lepiej korzystać np. z flexboxa.

4 odpowiedzi

odpowiedź 16 grudnia 2020 przez niezalogowany

odpowiedź 16 grudnia 2020 przez wizarddos Nałogowiec (25,930 p.)

odpowiedź 16 grudnia 2020 przez CubeStorm Pasjonat (15,020 p.)

odpowiedź 22 grudnia 2020 przez NoOgar95 Dyskutant (9,310 p.)

Cześć,

Tak jak poprzednicy proponuję przejść na nowsze rozwiązania, jednakże odpowiem na Twoje pytanie.

Float nadany na img sprawia, że inne elementy zaczynają go opływać. Nadając float:right na p, sprawiłeś, że on rzeczywiście się przykleja do górnego prawego rogu, jednak posiada on 100% width z faktu, że jest elementem blokowym. Nadając mu mniejszą szerokość zobaczysz, ze przykleja się do prawej krawędzi.

Dodałem też drugiego diva, który ma 90% szerokości jest na tyle szeroki, że nie mieści się obok diva czerwonego, ale widać, że przykleja się do prawej krawędzi.

https://codepen.io/NoOgar/pen/KKgvOPp