Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Automatyczna dynamiczna szerokość
Forum PHP.pl > Forum > Przedszkole
ponciusz
Witam!
Opis problemu:
powiedzmy że mam diva w którym znajdują się inne divy. main ma szerokość 800px divy wewnętrzne sa generowane automatycznie w zależności od ilosci pozycji dodanych. problem jest taki iż chcę aby divy zawsze były na całą szerokość czyli w tym przypadku miały po 400px. Jeśli będą 4 divy inside to powinny mieć po 200px itp... oczywiście mogą mieć kilka px mniej żeby zlikwidować granice ciasne pasowanie. czy takie coś jest możliwe w css i html?

  1. <div id="main">
  2. <div class="inside"></div>
  3. <div class="inside"></div>
  4. </div>


Dzięki!
piotrooo89
musisz zastosować JS, podczas ładowania strony obliczasz ilość div'ów w środku, później 800 dzielisz przez tą ilość i dostajesz rozmiar każdego, który dynamicznie zmieniasz - wszystko za pomocą JS.
ponciusz
Własnie miałem nadzieję że będę mógł uniknąć takiego rozwiązania.
piotrooo89
jeśli ładujesz dynamicznie div'y, nie wiesz ile ich będzie, jest to jedyne rozwiązanie.
Soulast
jeśli będziesz używał wartości można obliczyć ilość divów i tak użyć dzielenia itd
ponciusz
Czy możesz podpowiedzieć jak napisać taką prosta funkcję do zliczania tego co jest wewnątrz diva konkretnie zamiast divów wewnątrz będa linki <a></a>
Soulast
z góry uprzedzam że nie jestem pro więc może będzie mi to nieco cieżej wytłumaczyć ale postaram się. Więc dajmy przykład że wyrzucamy z bazy dane coś ala:

  1.  
  2. $sql=mysql_query("SELECT * FROM tabela");
  3. while ($dane= mysql_fetch_array($sql))
  4. {
  5.  
  6. $wynik= count($dane[id]);
  7.  
  8. if($wynik<4){ $css="min-width:400px;"; }
  9. if($wynik>4){ $css="min-width:200px;"; }
  10.  
  11. echo"<div style="$css"></div>";
  12.  
  13. }
  14.  


proszę mnie poprawić jeśli się mylę wink.gif
piotrooo89
mylisz się, a co jak będą 3 divy? trzeba to podzielić na 3... a u Ciebie nie ma żadnego dzielenia.
Soulast
Cytat(piotrooo89 @ 22.02.2012, 20:27:25 ) *
mylisz się, a co jak będą 3 divy? trzeba to podzielić na 3... a u Ciebie nie ma żadnego dzielenia.


dlatego też właśnie powyżej nie podałem dzielenia tylko użyłem po prostu if() co wydaje mi się być najprostrzym rozwiązaniem ale tak jak już wspomniałem im not pro wink.gif
ponciusz
docelowy kod wygląda tak:

  1. <div class="nivo-controlNav">
  2. <a class="nivo-control active" rel="0">1</a>
  3. <a class="nivo-control" rel="1">2</a>
  4. <a class="nivo-control" rel="2">3</a>
  5. <a class="nivo-control" rel="3">4</a>
  6. </div>


i tutaj linki sa dodawane z automatu nie mam także możliwości dodawania do nich czegokolwiek więc najłatwiejszym rozwiązaniem będzie po prostu stwierdzić ile ich tam jest czyli jakieś zapytanie typu:
sprawdz ile jest <a> w divie o klasie "nivo-controlNav" a potem dodać prosty skrypt gdzieś na stronie który wygeneruje mi wpis w css

  1. .nivo-controlNav{
  2. width:[(800px/wartosc)-1px]px;
  3. }


tylko teraz pytanie czy ten css zostanie rozpoznany bo jeśli przeglądarka wczytuje pierw css a potem html to zliczanie nastąpi po wczytaniu css czyli juz go nie podmieni?questionmark.gif dobrze myśle??
piotrooo89
w jQuery:

Kod
$(document).ready(function(){
    var count = $('#main').children().length;
    var widthMain = parseInt($('#main').css('width'));
  
    var sizeEach = Math.round(widthMain / count);
  
    $('.inside').css({width: sizeEach+'px'});
});
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.