Tema: Posicion automatica de un div debajo de otro con foreach
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/03/2014, 14:51
and_l_f
 
Fecha de Ingreso: febrero-2014
Ubicación: Cali
Mensajes: 20
Antigüedad: 10 años, 9 meses
Puntos: 0
Posicion automatica de un div debajo de otro con foreach
Buenas tardes a todos quisiera saber si me pueden colaborar en como darle a los div un modo automatico para que aparezca de nuevo tal como los tengo debajo de los primeros ya que a traves de php cargo los datos y necesito que se me impriman n cantidad de veces gracias aqui dejo el codigo

Código CSS: 
Ver original
  1. @charset "UTF-8";
  2.  
  3. .foto{
  4. list-style: none;
  5.  
  6. width: 6%;
  7. height: 12%;
  8.  
  9. margin: 1.5% 3%;
  10. border:3px solid #f4f4f4;
  11. background:rgba(255,255,255,.5);
  12. position: fixed;
  13.  
  14. -webkit-border-radius:10px;
  15. -moz-border-radius:10px;
  16. border-radius:10px;
  17. -webkit-box-shadow: 0 0 2px #aaa;
  18. -moz-box-shadow: 0 0 2px #aaa;
  19. box-shadow: 0 0 2px #aaa;
  20. }
  21.  
  22. .ajustar{
  23. list-style: none;
  24.  
  25. width: 6%;
  26. height: 12%;
  27.  
  28.  
  29. position: fixed;
  30.  
  31. -webkit-border-radius:10px;
  32. -moz-border-radius:10px;
  33. border-radius:10px;
  34. -webkit-box-shadow: 0 0 2px #aaa;
  35. -moz-box-shadow: 0 0 2px #aaa;
  36. box-shadow: 0 0 2px #aaa;
  37. }
  38.  
  39. .circular { 
  40. width: 30px; 
  41. height: 30px; 
  42. border-radius: 15px; 
  43. border:3px solid #f4f4f4;
  44. background:rgba(255,255,255,.5);
  45. position: fixed;
  46.     -webkit-border-radius: 15px; -moz-border-radius: 15px;   
  47. }
  48.  
  49. .info{
  50.     list-style: none;
  51.  
  52. width: 18%;
  53. height: 30%;
  54.  
  55. margin: 1.5% 10.5%;
  56. border:3px solid #f4f4f4;
  57. background:rgba(255,255,255,.5);
  58. position: fixed;
  59.  
  60. -webkit-border-radius:10px;
  61. -moz-border-radius:10px;
  62. border-radius:10px;
  63. -webkit-box-shadow: 0 0 2px #aaa;
  64. -moz-box-shadow: 0 0 2px #aaa;
  65. box-shadow: 0 0 2px #aaa;
  66.  
  67. }
  68.  
  69. .diasR{
  70. list-style: none;
  71.  
  72. width: 6%;
  73. height: 14%;
  74.  
  75. margin: 8.5% 3%;
  76. border:3px solid #f4f4f4;
  77. background:rgba(255,255,255,.5);
  78. position: fixed;
  79.  
  80. -webkit-border-radius:10px;
  81. -moz-border-radius:10px;
  82. border-radius:10px;
  83. -webkit-box-shadow: 0 0 2px #aaa;
  84. -moz-box-shadow: 0 0 2px #aaa;
  85. box-shadow: 0 0 2px #aaa;
  86. }
  87.  
  88. .mapa{
  89. list-style: none;
  90.  
  91. width: 22%;
  92. height: 23%;
  93.  
  94. margin: 5% 30%;
  95. border:3px solid #f4f4f4;
  96. background:rgba(255,255,255,.5);
  97. position: fixed;
  98.  
  99. -webkit-border-radius:10px;
  100. -moz-border-radius:10px;
  101. border-radius:10px;
  102. -webkit-box-shadow: 0 0 2px #aaa;
  103. -moz-box-shadow: 0 0 2px #aaa;
  104. box-shadow: 0 0 2px #aaa;
  105. }
  106.  
  107. .referido{
  108. list-style: none;
  109.  
  110. width: 3%;
  111. height: 5%;
  112.  
  113. margin: 1.5% 30%;
  114. border:3px solid #f4f4f4;
  115. background:rgba(255,255,255,.5);
  116. position: fixed;
  117.  
  118. -webkit-border-radius:10px;
  119. -moz-border-radius:10px;
  120. border-radius:10px;
  121. -webkit-box-shadow: 0 0 2px #aaa;
  122. -moz-box-shadow: 0 0 2px #aaa;
  123. box-shadow: 0 0 2px #aaa;
  124. }
  125.  
  126. .Adias{
  127. list-style: none;
  128.  
  129. width: 3%;
  130. height: 5%;
  131.  
  132. position: fixed;
  133.  
  134. -webkit-border-radius:10px;
  135. -moz-border-radius:10px;
  136. border-radius:10px;
  137. -webkit-box-shadow: 0 0 2px #aaa;
  138. -moz-box-shadow: 0 0 2px #aaa;
  139. box-shadow: 0 0 2px #aaa;
  140. }
  141. .recordatorio{
  142. list-style: none;
  143.  
  144. width: 3%;
  145. height: 5%;
  146.  
  147. margin: 1.5% 37%;
  148. border:3px solid #f4f4f4;
  149. background:rgba(255,255,255,.5);
  150. position: fixed;
  151.  
  152. -webkit-border-radius:10px;
  153. -moz-border-radius:10px;
  154. border-radius:10px;
  155. -webkit-box-shadow: 0 0 2px #aaa;
  156. -moz-box-shadow: 0 0 2px #aaa;
  157. box-shadow: 0 0 2px #aaa;
  158. }
  159.  
  160. .Arecordatorio{
  161. list-style: none;
  162.  
  163. width: 3%;
  164. height: 5%;
  165.  
  166. position: fixed;
  167.  
  168. -webkit-border-radius:10px;
  169. -moz-border-radius:10px;
  170. border-radius:10px;
  171. -webkit-box-shadow: 0 0 2px #aaa;
  172. -moz-box-shadow: 0 0 2px #aaa;
  173. box-shadow: 0 0 2px #aaa;
  174. }
  175. .comentarios{
  176. list-style: none;
  177. overflow-y: scroll;
  178. width: 49%;
  179. height: 20%;
  180.  
  181. margin: 17% 3%;
  182. border:3px solid #f4f4f4;
  183. background:rgba(255,255,255,.5);
  184. position: fixed;
  185.  
  186. -webkit-border-radius:10px;
  187. -moz-border-radius:10px;
  188. border-radius:10px;
  189. -webkit-box-shadow: 0 0 2px #aaa;
  190. -moz-box-shadow: 0 0 2px #aaa;
  191. box-shadow: 0 0 2px #aaa;
  192.  
  193. }
  194. #comentariado{
  195.  
  196.  
  197. width: 46%;
  198. height: 8%;
  199. margin: 0.5% 1%;
  200. background-color: rgb(55,22,11);
  201. border:3px solid #f4f4f4;
  202. background:rgba(255,255,255,.5);
  203. position: fixed;
  204.  
  205. -webkit-border-radius:10px;
  206. -moz-border-radius:10px;
  207. border-radius:10px;
  208. -webkit-box-shadow: 0 0 2px #aaa;
  209. -moz-box-shadow: 0 0 2px #aaa;
  210. box-shadow: 0 0 2px #aaa;
  211. }
  212.  
  213. .cajaComunicacion{
  214.   width:13%;
  215.   height: 21%;
  216.  
  217.  
  218.   margin:1% 55%;
  219.   padding:10px 50px;
  220.   border:3px solid #f4f4f4;
  221.   background:rgba(255,255,255,.5);
  222.   position: fixed;
  223.  
  224.   -webkit-border-radius:10px;
  225.   -moz-border-radius:10px;
  226.   border-radius:10px;
  227.   
  228.   -webkit-box-shadow: 0 0 2px #aaa;
  229.  
  230.  
  231.   -moz-box-shadow: 0 0 2px #aaa;
  232.   box-shadow: 0 0 2px #aaa;
  233. }
  234.  
  235. .cajaR{
  236.   width:13%;
  237.   height: 21%;
  238.  
  239.  
  240.   margin:14% 55%;
  241.   padding:10px 50px;
  242.   border:3px solid #f4f4f4;
  243.   background:rgba(255,255,255,.5);
  244.   position: fixed;
  245.  
  246.   -webkit-border-radius:10px;
  247.   -moz-border-radius:10px;
  248.   border-radius:10px;
  249.   
  250.   -webkit-box-shadow: 0 0 2px #aaa;
  251.  
  252.  
  253.   -moz-box-shadow: 0 0 2px #aaa;
  254.   box-shadow: 0 0 2px #aaa;
  255. }