Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Ułożenie div'ow inline i block'owo
Forum PHP.pl > Forum > Przedszkole
pablo_83
witam, mam problem, z którym walczę już jakiś czas.
mianowicie mam widok, który zwraca mi pola formularza wraz z ich opisem (docelowo będą jeszcze dwa linki edycja i kasuj).

struktura divów jaką nadałem wygląda tak:
  1. <div class="pola_formularza">
  2. <div class="lewa_strona">1</div><div class="prawa_strona"><input type="text" readonly="readonly"/></div>
  3. </div>
  4. <div class="pola_formularza">
  5. <div class="lewa_strona">2</div><div class="prawa_strona"><textarea readonly="readonly"></textarea></div>
  6. </div>
  7. <div class="pola_formularza">
  8. <div class="lewa_strona">3</div><div class="prawa_strona"><input type="text" readonly="readonly"/></div>
  9. </div>
  10. <div class="pola_formularza">
  11. <div class="lewa_strona">4</div><div class="prawa_strona"><select><option></option></select></div>
  12. </div>


czyli mamy cztery wiersze (pola_formularza), które dzielą się na dwie kolumny (lewa i prawa).
oto css:
  1. .pola_formularza{
  2. display: block;
  3. min-height: 30px;
  4. border: 1px solid #0066cc;
  5. width: 500px;
  6. }
  7.  
  8. .lewa_strona{
  9. display: inline;
  10. width: 200px;
  11. border: 1px solid #F00;
  12. margin: 5px;
  13. }
  14. .prawa_strona{
  15. display: inline;
  16. width: 200px;
  17. border: 1px solid #E2c934;
  18. margin: 5px;
  19. }
  20. .pola_formularza .prawa_strona input{
  21. width: 200px;
  22. }
  23. .pola_formularza .prawa_strona textarea{
  24. width: 200px;
  25. }
  26. .pola_formularza .prawa_strona select{
  27. width: 200px;
  28. }


w tym momencie divy lewa i prawa nie reagują w ogóle na zmiany szerokości (mają tylko szerokość taką jak wprowadzona treść), tak samo nie reagują na zmiany w wysokości.
Proszę o pomoc w jaki sposób mogę ładnie rozłożyć te divy po lewej i prawej stronie.

linki, które docelowo się pojawią będą w tej samej lini co divy lewa i prawa, dokładnie po prawej stronie prawego diva, w odp proszę o uwzględnienie tego elementu.
ShadowD
Grrr, a dlaczego nie dasz gdzieś tego na serwerze?
gargamel
Dla elementów będących inline nie można ustawiać szerokości. Zadziała to tylko w niektórych przeglądarkach.

Edit:

Co do rozmieszczania divów to : display:block; a do tego float: na przykład left. Wtedy możesz dowolnie manipulować szerokością i wysokością.
pablo_83
jak dam float to lewa i prawa w stosunku do siebie są ok, jednak "uciekają" z pola_formularza.
pola_formularza zostają stałe np. przy textarea wysokość jego nie dostosowuje się do zawartości.

Jakieś pomysły jak to w inny sposób ładnie ułożyc?
gargamel
Mała podpowiedź
  1. <style type="text/css">
  2. .container { width:700px; height:500px; border:1px solid black; }
  3. .internal { width:340px; height:75px; border:1px solid black; float:left; }
  4. .clearer { clear:both; }
  5. </style>
  6.  
  7. <div class="container">
  8.  
  9. <div class="internal"> 1 </div> <div class="internal"> 2 </div>
  10. <div class="internal"> 3 </div> <div class="internal"> 4 </div>
  11. <div class="internal"> 5 </div> <div class="internal"> 6 </div>
  12. <div class="internal"> 7 </div> <div class="internal"> 8 </div>
  13.  
  14. <div class="clearer"></div>
  15.  
  16. </div>
drPayton
Mały hint: jeśli elementy blokowe mają być obok siebie, display:inline-block. Działa we wszystkich istotnych przeglądarkach, a IE6 nie bierze sie juz pod uwagę.
Z taką właściwością, rozmieszczane są w jednej linii jak elementy "inline" jednocześnie zachowując możliwość nadawania rozmiarów i inne właściwości elementów blokowych.
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.