Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML][CSS] ułożenie divów
Forum PHP.pl > Forum > Przedszkole
kamilo818
Cześć,
czy jest jakiś łatwy znany sposób na ułożenie divów o tej samej szerokości ale różnej wysokości w kilku rzędach (w zależnosci o szerokości ekranu ) tak aby nie było między nimi luk?

aktualnie mam coś takiego :
https://jsfiddle.net/yvtej467/1/
A chce żeby było coś takiego:


Da się to za pomocą samego cssa zrobić?

Ewentualnie myślę ze dało by się to zrobić za pomoca js gdzie bym ustawiał position:absolute po kolei każdego diva w zależnosci o szerokości ekranu i położenia diva poprzedniego. Ale czy można łatwiej?

edit ----------------------------------
Jakoś sam poradziłem sobie.
Nie wiem jak z jakością tego, ale sprawdza się dobrze:)
Może komuś się przyda.

  1. <div class="page" id="aktualnosci">
  2. <div class="wpis" data-sort="1">
  3. <div id="wpis_date">
  4. 11-04-2015
  5. </div>
  6. <div id="wpis_nr">
  7.  
  8. </div>
  9. <div id="wpis_title">
  10.  
  11. </div>
  12. <div id="wpis_content">
  13.  
  14. </div>
  15. </div>
  16. <div class="wpis" data-sort="2">
  17. <div id="wpis_date">
  18.  
  19. </div>
  20. <div id="wpis_nr">
  21.  
  22. </div>
  23. <div id="wpis_title">
  24.  
  25. </div>
  26. <div id="wpis_content">
  27. </div>
  28. </div>
  29. <div class="wpis" data-sort="3">
  30. <div id="wpis_date">
  31.  
  32. </div>
  33. <div id="wpis_nr">
  34.  
  35. </div>
  36. <div id="wpis_title">
  37.  
  38. </div>
  39. <div id="wpis_content">
  40.  
  41. </div>
  42. </div>
  43. <div class="wpis" data-sort="4">
  44. <div id="wpis_date">
  45.  
  46. </div>
  47. <div id="wpis_nr">
  48.  
  49. </div>
  50. <div id="wpis_title">
  51.  
  52. </div>
  53. <div id="wpis_content">
  54.  
  55. </div>
  56. </div>
  57.  
  58. </div>
  59.  
  60.  
  61. <script>
  62.  
  63. function makeGrid() {
  64.  
  65. if ($('div#aktualnosci').width() <= ($('.wpis').width()+10)*2 && $("#grid").length) {
  66. var ilosc = $(".wpis").length;
  67. for (i = 1; i < ilosc + 1; i++) {
  68. $(".wpis[data-sort='" + i + "']").appendTo("div#aktualnosci");
  69. }
  70. $('div#grid').remove();
  71. } else if ($('div#aktualnosci').width() > ($('.wpis').width()+10)*2 && $("#aktualnosci .wpis").length) {
  72. if ($("#grid").length) {
  73. } else {
  74. $('div#aktualnosci').prepend('<div id="grid"><div id="col1"></div><div id="col2"></div></div>');
  75. $('#grid>div').width($('.wpis').width());
  76. $(".wpis").each(function (e) {
  77. if (e % 2 == 0)
  78. $(this).appendTo("#grid div#col1");
  79. else
  80. $(this).appendTo("#grid div#col2");
  81. });
  82. }
  83. }
  84. }
  85. ;
  86.  
  87. makeGrid();
  88.  
  89. $(window).resize(function () {
  90. makeGrid();
  91. });
  92. </script>
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.