Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Divy i float left

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Divy i float left

Post 05.04.2017, 09:49:04

Witam,
NIe wiem jak sobie poradzić ze stosunkowo prostą rzeczą. Chodzi o umieszczenie div'a o nazwie box3 na równi z divem box1. Generalnie o kontrole zachowania float'a.
Przykład:
https://jsfiddle.net/qbvdL5v9/
pjotrek
Posty: 18
Dołączył(a): 07.05.2015

Re: Divy i float left

Post 05.04.2017, 10:48:49

2 najszybsze rozwiązania jakie przyszły mi do głowy:
1. zamień box2 i box3 kolejnością w kodzie HTML
2. do box3 dodaj margin-top: -105px;
Innego rozwiązania przy zachowaniu float nie widzę.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19509
Dołączył(a): 14.04.2002

Re: Divy i float left

Post 05.04.2017, 11:33:01

A nie stosując float?
pjotrek
Posty: 18
Dołączył(a): 07.05.2015

Re: Divy i float left

Post 12.04.2017, 16:02:05

Uczę się bardzo od niedawna, wymyśliłem 1 sposób , lecz nie wiem czy jest on wydajny oraz prawidłowy gdyby zaszła potrzeba rozwijania strony lub modyfikacji
Link: https://jsfiddle.net/qbvdL5v9/1/
W 3 divie usunąłem float:left , dodałem position:absolute i po tym ustawiłem ręcznie pozycje diva względem jego rodzica bo tak działa position:absolute
zolcio123
Posty: 5
Dołączył(a): 20.05.2015

Re: Divy i float left

Post 21.05.2017, 12:02:47

Dodaj to do stylów kontenera. Między 2 a 3 "a" jest "enter", między 1 a 2 spacja. Obojętnie jakie litery, a nawet wyrazy sobie tam dasz.
Kod: Zaznacz cały
display: grid;
   grid-template-areas:
   "a a
   a"; /* Może bez tego a w następnej linii też pójdzie */
    grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px;

Jak wywalisz marginesy kwadratom, to podrzuć (też do kontenera):
Kod: Zaznacz cały
grid-column-gap: 10px;
  grid-row-gap: 10px;


Nie do końca to "opływanie", bo to dynamiczna siatka, ale... dynamiczna.
Żeby drugi kwadrat był trzeci, daj mu w regułach order: 3. Żeby 3 kwadrat był drugi, daj mu w regułach order: 2.

PS. Ach, wszędzie powciskałeś te floatowe potworki. Jeszcze raz zobaczę, czy pójdzie flexbox.
kabexxx
Posty: 183
Dołączył(a): 27.11.2011


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: RqweF i 1 gość

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50074 zarejestrowanych użytkowników.
Najnowszy użytkownik: WillisEq


Nasi użytkownicy napisali:

  • 934726 wiadomości
  • w 246223 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)