Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript] Przesuwanie elementów po kliknięciu
Forum PHP.pl > Forum > Przedszkole
michau85
Witajcie.
Mam coś takiego:

  1.  
  2. #nadrzędny{
  3. width:100px;
  4. height:100px;
  5. position:relative;
  6. overflow:hidden;
  7. }
  8.  
  9. .podrzedny{
  10. width:100px;
  11. height:100px;
  12. position:absolute;
  13. float: left;
  14. }
  15.  
  16.  
  17.  
  18.  
  19. <div id="nadrzedny">
  20. <div class="podrzedny">Pierwszy </div>
  21. <div class="podrzedny">Drugi </div>
  22. <div class="podrzedny">Trzeci </div>
  23.  
  24.  
  25. </div>
  26.  
  27. Chciałbym po kliknięciu przycisku przesuwać wszystkie podrzędne elementy np. o 100px w lewo. (w jquery chiałbym zrobić efekt stosu) Wszystko jest dobrze jeśli element nadrzędny
  28. ma taką szerokość jak suma elementów podrzędnych czyli 300px. Ja natomiast chciałbym aby element nadrzędny miał tyle co podrzędny czyli 100px. Chciałbym też żeby elementy
  29. podrzędne ustawione były obok siebie bez "ręcznego" ustawiania pozycji (czyli bez top , left). Dlatego użyłem float:left Problem jednak w tym że przy pozycjonowaniu relative-aboslute
  30. float nie działa To powoduje że divy podrzędne ustawiają się jeden pod drugim zamiast obok siebie
  31. Rozwiązałbym problem ustawiając pozycję każdego podrzędnego diva "ręcznie", ale takie rozwiązanie nie do końca mnie zadowala. Proszę o jakieś podpowiedzi. I z góry dziękuję za pomoc
  32.  
Turson
Ciężko zrozumieć o co kaman.

Pobaw się
  1. <div id="nadrzedny">
  2. <div class="podrzedny">Pierwszy </div>
  3. <div class="podrzedny">Drugi </div>
  4. <div class="podrzedny">Trzeci </div>
  5. </div>
  6. <button onclick="przesun()">Przesun</button>
  7.  
  8. function przesun(){
  9. $('.podrzedny').css('margin-left', '100px');
  10. }
michau85
Generalnie chodzi mi o to jak ustawić elementy podrzędne obok siebie. Przy takim ustawieniu css(jak napisałem) float:left nie działa. Nie chciałbym ustawiać pozycji poprzez top: Left:
Turson
W takim razie po co ci pozycja absolutna? Jej używa się tylko w niektórych przypadkach. Spytałeś również o przesuwanie elementów po kliknięciu, więc napisałem wyżej.
Możesz spróbować z display:inline
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.