[CSS][HTML]Automatyczna dynamiczna szerokość Opcje

[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?

[HTML] pobierz, plaintext 
<div id="main">
  <div class="inside"></div>
  <div class="inside"></div>
</div>
[HTML] pobierz, plaintext 

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

Ten post edytował Soulast 22.02.2012, 20:11:36

[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:

[PHP] pobierz, plaintext 
 
						$sql=mysql_query("SELECT * FROM tabela");
						while ($dane= mysql_fetch_array($sql))
						{
 
                                                        $wynik= count($dane[id]); 
 
							if($wynik<4){ $css="min-width:400px;"; }
							if($wynik>4){ $css="min-width:200px;"; }
 
                                                        echo"<div style="$css"></div>";
 
                                                 }
 
[PHP] pobierz, plaintext 

proszę mnie poprawić jeśli się mylę

Ten post edytował Soulast 22.02.2012, 20:25:57

[piotrooo89]

mylisz się, a co jak będą 3 divy? trzeba to podzielić na 3... a u Ciebie nie ma żadnego dzielenia.

[Soulast]

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

[ponciusz]

docelowy kod wygląda tak:

[HTML] pobierz, plaintext 
<div class="nivo-controlNav">
  <a class="nivo-control active" rel="0">1</a>
  <a class="nivo-control" rel="1">2</a>
  <a class="nivo-control" rel="2">3</a>
  <a class="nivo-control" rel="3">4</a>
</div>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
.nivo-controlNav{
width:[(800px/wartosc)-1px]px;
}
[HTML] pobierz, plaintext 

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? dobrze myśle??

Ten post edytował ponciusz 22.02.2012, 20:36:52

[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'});
});