Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Jak poukladac divy aby byly po 2 obok siebie w kolumnach?
Forum PHP.pl > Forum > Przedszkole
dolar
Mam maly problem z html'em... otoz mam petle foreach, ktora wyciga mi pieknie dane z bazy MySQL i chcialabym teraz aby mi je wyswietlala ladnie, ale cos mi nei idzie :/.

<?
foreach ($dodanie as $todo){
echo '<div style="width: 225px; background-color:red; float:left">'."- ".$todo['zadanie'].'</div>';
echo '<div style="background-color:green;">'.'<input type="checkbox">'.'</div>'."<br/><br/>";
}
?>

pierwsze echo nie ma podanej wysokosci z tego wzgledu ze tam uzytkownik wpisuje w pole jakis tekst, ktory moze byc albo krotszy albo dluzszy, natomiast drugie echo to checkbox. Ma to wygladac tak ze ma sie wyswietlac obok siebie najpeirw wpis uzytkownika a pozniej checkbox, pozniej kolejny wpis z checboxem jeden pod drugim itd. Problem pojawia sie w momencie gdy pierwsze echo ma rozna wysokosc, owszem checbox jest obok, ale jesli poprzedni byl dosc krotki to mi sie pojawia zaraz pod checboxem a tego nie chce, chce aby bylo od nowej lini. Nie wiem czy wylumaczylam dosc zrouzmiale, ale pokaze jeszcze jak to ma wygladac wizualnie:

Tak sie mi robi:

wpis dlugi uztkownika, <check>
ktory cos wpisuje_____ wpis krotki uztkownika <check>

A ma byc tak:

wpis dlugi uztkownika, <check>
ktory cos wpisuje

wpis krotki uztkownika <check>
SmokAnalog
Wywal floaty i niech każda para ma swojego diva-rodzica.
dolar
Ale jak to ubrac w tym kodzie? Bo za bardzo nie wiem jak sie za to zabrac nawet :/
nospor
Poprostu dodaj nadrzednego DIV
Z tym wywaleniem float to tez nie tak do konca

  1. foreach ($dodanie as $todo){
  2. <div style="clear:both;">
  3. <div style="width: 225px; background-color:red; float:left">- '.$todo['zadanie'].'</div>
  4. <div style="background-color:green;"><input type="checkbox"></div>
  5. </div>
  6. ';
  7.  
  8. }

I nie robijaj tekstu gdy to jest totalnie niepotrzebne. Tylko zaciemniasz. Spojrz jak ja to zrobilem
dolar
Faktycznie dziala!, a moglbys mi jeszcze wytlumaczyc jak dziala clear:both? nie spotkalam sie z tym wczesniej, zazwyczja uzywalam br clear all
nospor
clar:both, jak to wyjasniono w manualu css, anuluje float wink.gif - to tak w wielkim skrocie wink.gif
dolar
Ale jak to anuluje? przeciez najpierw jest ze ma anulowac a poznije ze ma zrobic float? nie czaje ;p
nospor
To wywal clear both i zobacz co sie stanie.
dolar
Znowu jakby dzialaly floaty... czyli clear both anuluje mi te floaty przy kolejnej petli? Chcialabym jeszcze dodac enter po kazdej iteracji zeby te divy tak nei przylegaly do siebie, ale tez mi nie dziala jak dodam na koncu petli <br/>. Musze sporo doczytac z html'a
nospor
Tak.
Co do odstepu to dodaj poprostu margin dla DIV rodzica.
SmokAnalog
nospor są o wiele lepsze sposoby niż float + clear. Float powstał po to, żeby wtapiać elementy w tekst, a nie do ustawiania elementów obok siebie. Masz inline-block, masz flexbox - to są sposoby dające o wiele lepszą kontrolę niż zagrzybiały float i jeszcze bardziej zagrzybiały clear.
nospor
Alez ja nie mowie ze nie. Ja tam specem od css nie jestem, rozwinalem tylko kod autora oraz ustosunkowalem sie do twojego posta ze samo wywalenie float stamtad nie rozwiazep problemu autora. smile.gif
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.