Foros del Web » Creando para Internet » CSS »

Posicion automatica de un div debajo de otro con foreach

 Estas en el tema de Posicion automatica de un div debajo de otro con foreach en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/03/2014, 14:51
 
Fecha de Ingreso: febrero-2014
Ubicación: Cali
Mensajes: 20
Antigüedad: 10 años, 10 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. }
  #2 (permalink)  
Antiguo 08/03/2014, 16:13
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Posicion automatica de un div debajo de otro con foreach
El código no ayuda demasiado a ver qué quieres hacer. Según la escueta explicación, lo suyo sería indicar un ancho al elemento que contiene lo que quieras mostrar en PHP:

Código CSS: 
Ver original
  1. span {
  2.   width: 25%;
  3. }

Etiquetas: background, color, debajo, foreach, posicion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 02:07.