Dynamiczne boksy php i css

Dynamiczne boksy php i css

Ostatnim czasy spotkałem się z takim problemem, podczas pracy nad jednym projektem. Problem polegał na dużej ilości pól do zaznaczenia  type="checkbox" , które miały być poukładane w kolumnach pionowych np. po trzy sztuki lub dwie w zależności od dokumentu. Na początku próbowałem zrobić te rozwiązanie za pomocą tabel lecz nie za bardzo mi to wychodziło,  źle się ustawiały albo było ich po dwa w pierwszej tabeli, a pozostałych po jednej, nie wyglądało to estetycznie, takie niechlujstwo J.  Kombinowałem dalej przerzuciłem się na <div> i spróbowałem .css   box-sizing: border-box; lecz w moim przypadku też nie pomogło,  bo nie było szansy ustawić boksów jeden koło drugiego ze względu na to,  że miałem ustawioną pętlę pobierającą dane z bazy danych dynamicznie while ($row = @mysql_fetch_array($result)) {   

<div class="box">'.$row['nazwa'].' </div>';

<div class="box1"><input type="checkbox"     itd… 

Kolejnym rozwiązaniem na jakie wpadłem to ustawiłem funkcję sterującą if(){} i dodałem do niej modulo, dzięki niej dzieliło mi na trzy boksy,  ale też okazało się nie wystarczające, ze względu na nie możliwość do poustawiania tak jak było wymagane. Pomogło w końcu column-count:J ,   na początku nie mogłem się nadziwić że rozwiązanie było takie proste, a jednak. Skróciłem kod css o parę linijek i pozbyłem się troszkę zbędnego kodu, który okazał się teraz nie potrzebny. Kod poniżej pokazuje rozwiązanie dzielenia elementów pobranych z bazy danych za pomocą pętli while ($row = @mysql_fetch_array($result)) {   } i podanie wyniku na trzy boksy umieszczone w pionie obok siebie. 

 


  .box_kolumny {
   column-count: 3; /* All */
   -moz-column-count: 3; /* firefox */
   -webkit-column-count: 3; /* opera, chrome, safari*/
   width: 45em;
}

  .szerokosc_kolumny {
    column-width: 55px; /* All */
    -webkit-column-width: 55px; /* opera, chrome, safari */
    -moz-column-width: 55px; /* firefox */
}
   .box {
       width: 59%;
       float: left;
       padding-bottom: 5px;
       height:20px;
     font-size:10px;
   }
   .box1 {
       width: 25%;
       float: left;
       padding-bottom: 25px;
       height:20px;
       font-size:10px;
   }



$result = @mysql_query("SELECT * FROM kategorie WHERE poziom='1' ORDER BY nazwa ASC"); while ($row = @mysql_fetch_array($result)) { $kategorii = '
'.$row['nazwa'].'
'; $kategorii .= '
'; }

A tu efekt końcowy

kolumny css

Dodaj komentarz


Kod antyspamowy
Odśwież

Używamy cookies i podobnych technologii m.in. w celach: świadczenia usług, reklamy, statystyk. Korzystanie z witryny bez zmiany ustawień Twojej przeglądarki oznacza, że będą one umieszczane w Twoim urządzeniu końcowym. Pamiętaj, że zawsze możesz zmienić te ustawienia. To find out more about the cookies we use and how to delete them, see our privacy policy.

I accept cookies from this site.

EU Cookie Directive Module Information