Obrazek i tekst w jednej linii

Question

Potrzebuję pomocy w uzyskaniu poniższego efektu:

Udało mi się dotrzeć do tego momentu:

<div class="enjoy-css1">
        <img src="sciezka.png" style="padding-top: 5%; padding-right: 10%; weight: 70%; height: 70%;"/>    
</div>        

.enjoy-css1 {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 100%;
  height: 400px;
  border: none;
  text-align: right;
  background-color: #0d33ad ;
}

 

Answer 1

Pokaż jak twoja strona wygląda i co dokładnie chcesz osiągnąć. Z tego co tu przedstawiłeś wynika że do tekstu masz dodać float left a do obrazka float right

Comments

To strona treningowa na której pracuję: oxhost.pl

Osiągnąć chcę taki sam efekt jak na przedstawionym wyżej zdjęciu, czyli po prawej stronie obrazek, po lewej tekst. Póki co chodzi mi o samo rozmieszczenie.

---

dodaj do diva z  obrazkiem float: right;
dodaj do diva z tekstem float: left;
Zadbaj o to żeby div z tekstem nie miał width: 100%;  tak samo w przypadku drugiego diva.
jeżeli długość strony to np 1000px to div z obrakzkiem ma zajmować np 499px a div z tekstem również 499px;
Z tego co mi wiadomo powinno to działać. Jeżeli nie będzie to ktoś inny ci pomoże

Answer 2

Stwórz diva o klasie container i podziel sobie ten container, umieszczając w nim elementy np. .container-left oraz .container-right. Potem dla containera dodaj w CSS display: grid; oraz daj mu grid-template-columns: 1fr 1fr; Podzieli ci to diva na dwa (o ile wcześniej ustawisz mu jakieś wymiary, szerokość np w %). W lewym divie wtedy wpakuj tekst a w prawym daj obrazek i będzie zawsze po prawej stronie. Floaty, jakieś positiony absoluty i tego typu rzeczy to za przeproszeniem gówno :D bo potem łatwo o błędy na mniejszych urządzeniach.