Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] como ordenar cuadros sin que se pierda la posicion con css?

Estas en el tema de como ordenar cuadros sin que se pierda la posicion con css? en el foro de CSS en Foros del Web. estoy generando desde php los datos que van a ir varios cuadros, este es mi codigo como lo genero: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código php+css+html: Ver original ...
  #1 (permalink)  
Antiguo 04/05/2020, 16:03
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 549
Antigüedad: 11 años, 8 meses
Puntos: 9
Busqueda como ordenar cuadros sin que se pierda la posicion con css?

estoy generando desde php los datos que van a ir varios cuadros, este es mi codigo como lo genero:
Código php+css+html:
Ver original
  1. <style>
  2. .app_lista_contenido{
  3.     width:100%;
  4. }
  5. .app_lista_item{
  6.     float:left;
  7.     width:45%; margin:3% 0 0 3%;
  8. }
  9. .app_lista_item_imagen{
  10.     width:100%; height:150px;
  11. }
  12. .app_lista_item_nombre{
  13.     padding:10px 5px 5px 5px; margin-top:-5px; border:1px solid #ccc;
  14.     font-size:13px;
  15. }
  16. </style>
  17. <div class="app_lista_contenido ma oh">
  18.     <?
  19.         $productos=array(
  20.             array("nombre"=>"food", "imagen"=>"http://lorempixel.com/200/200/food", "precio"=>"50"),
  21.             array("nombre"=>"sports", "imagen"=>"http://lorempixel.com/200/200/sports", "precio"=>"332"),
  22.             array("nombre"=>"este es 333 nombre largo", "imagen"=>"http://lorempixel.com/200/200/city", "precio"=>"636"),
  23.             array("nombre"=>"city extra super super largo", "imagen"=>"http://lorempixel.com/200/200/abstract", "precio"=>"485"),
  24.             array("nombre"=>"business", "imagen"=>"http://lorempixel.com/200/200/business", "precio"=>"257"),
  25.             array("nombre"=>"nightlife nombre super super largo", "imagen"=>"http://lorempixel.com/200/200/nightlife", "precio"=>"156"),
  26.             array("nombre"=>"fashion", "imagen"=>"http://lorempixel.com/200/200/fashion", "precio"=>"700"),
  27.            
  28.             array("nombre"=>"food", "imagen"=>"http://lorempixel.com/200/200/food", "precio"=>"222"),
  29.             array("nombre"=>"sports", "imagen"=>"http://lorempixel.com/200/200/sports", "precio"=>"635"),
  30.             array("nombre"=>"este es 333", "imagen"=>"http://lorempixel.com/200/200/city", "precio"=>"834"),
  31.             array("nombre"=>"city nombre extra super super largo", "imagen"=>"http://lorempixel.com/200/200/abstract", "precio"=>"944"),
  32.             array("nombre"=>"business", "imagen"=>"http://lorempixel.com/200/200/business", "precio"=>"2347"),
  33.             array("nombre"=>"nightlife", "imagen"=>"http://lorempixel.com/200/200/nightlife", "precio"=>"1689"),
  34.             array("nombre"=>"fashion", "imagen"=>"http://lorempixel.com/200/200/fashion", "precio"=>"278"),
  35.         );
  36.         foreach($productos as $producto => $contenido){
  37.     ?>
  38.     <div class="app_lista_item oh rod">
  39.         <img src="<?=$contenido['imagen']?>" class="app_lista_item_imagen db rod" />
  40.         <div class="app_lista_item_nombre"><?=$contenido['nombre']?></div>
  41.     </div>
  42.     <?
  43.         }
  44.     ?>
  45. </div>

esto es un ejemplo sin php: https://jsfiddle.net/traslapc/e20cw6sh/

como veran se desposicionan los cuadros, no estan alineados:


lo que me gustaria lograr es esto


primero que esten alineados como en la imagen de la izquierda, y segundo, que cada dos cuadros me genere un cuadro que ocupe el tamaño de 4 cuadros, como puedo realizar lo mencionado?
__________________
Appones.net - www.appones.net
  #2 (permalink)  
Antiguo 04/05/2020, 16:52
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.682
Antigüedad: 12 años, 3 meses
Puntos: 1116
Respuesta: como ordenar cuadros sin que se pierda la posicion con css?

1.- deja de usar float para alinear contenidos
2.- utiliza flex, este tiene opciones para posicionar elementos asi como para permitir o impedir el salto de linea

También considera que al ser por CSS tienes que ser muy preciso con el contenido o estar ajustando constantemente.

Mi recomendacion usa algo de javascript
https://masonry.desandro.com/
  #3 (permalink)  
Antiguo 04/05/2020, 23:33
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 549
Antigüedad: 11 años, 8 meses
Puntos: 9
Respuesta: como ordenar cuadros sin que se pierda la posicion con css?

gracias por la respuesta arturo, estas en todos lados jaja, el punto es no usar php ni js, solo css, logre lo que queria usando lo siguiente en el contenedor:

Código CSS:
Ver original
  1. display: grid;
  2. grid-template-columns: repeat(2, 1fr);

y para agregar el cuadro de una sola imagen use:
Código CSS:
Ver original
  1. grid-column:1/3;
  2. grid-row:2/3;

dejo aquí un link de prueba: https://jsfiddle.net/traslapc/1zu70r6o/
y los paso para resolver el problema: https://es.stackoverflow.com/questio...sicion-con-css
__________________
Appones.net - www.appones.net



La zona horaria es GMT -6. Ahora son las 15:53.