Foros del Web » Creando para Internet » Diseño web »

Cómo colocar bloques juntos?

Estas en el tema de Cómo colocar bloques juntos? en el foro de Diseño web en Foros del Web. Buenas, querría colocar bloques primero en filas y, que al cambiar de fila, el siguiente elemento se coloque justo debajo del primero de la fila ...
  #1 (permalink)  
Antiguo 26/04/2015, 11:24
 
Fecha de Ingreso: septiembre-2013
Mensajes: 13
Antigüedad: 10 años, 6 meses
Puntos: 0
Pregunta Cómo colocar bloques juntos?

Buenas, querría colocar bloques primero en filas y, que al cambiar de fila, el siguiente elemento se coloque justo debajo del primero de la fila superior pero lo que me sale es esto:

https://googledrive.com/host/0B9VCcIDtNmbVfnJTRHFMT2hMajBWdlZmNk9tOURMdk04dzlxd UhxSVhmNEpMQTVfZXVDbVE/Captura-de-pantalla-(12).gif

alguien sabe como solucionarlo??
  #2 (permalink)  
Antiguo 26/04/2015, 11:42
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Cómo colocar bloques juntos?

Te recomiendo usar Masonry
  #3 (permalink)  
Antiguo 28/04/2015, 10:54
 
Fecha de Ingreso: septiembre-2013
Mensajes: 13
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Cómo colocar bloques juntos?

Lo he probado y me funciona mal :(
lo que hace es esto:

he probado de las dos formas que pone en la página que me sugeriste, tanto en una como en otra no realiza el efecto deseado.
Pongo el código html de esa sección y los css asociados por si ayuda

Código HTML:
Ver original
  1. <div id="news">
  2.         <div class="noticia"><p>Este curso ha sido concebido como una introducción al diseño de
  3. aplicaciones Web en HTML5, tanto de tipo genérico como para Firefox
  4. OS. Sus contenidos tienen como objetivo capacitar para la programación
  5. y el diseño de aplicaciones, utilizando HTML5, CSS y JavaScript.
  6.         <div class="noticia"><p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.
  7.         <div class="noticia"><p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.
  8.     </div>

CSS:
Código CSS:
Ver original
  1. #news {
  2.     width:800px;
  3.     margin: 0 auto;
  4.     }
  5.    
  6. #news div {
  7.     height:100%;
  8.     width:370px;
  9.     padding:5px;
  10.     border-radius:15px;
  11.     background-color:rgba(255,255,255,0.3);
  12.     }
  13.    
  14. #news div p {
  15.     font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  16.     color:white;
  17.     text-shadow:#000000 2px 2px;
  18.     }
  #4 (permalink)  
Antiguo 28/04/2015, 11:24
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: Cómo colocar bloques juntos?

No termino de entender bien que es lo que queres hacer, pero viendo tu codigo, ninguno de tus divs con clase "noticia" tiene etiqueta de cierre, los <p> tampoco..

Esto pasa al cerrar los divs:

http://codepen.io/anon/pen/MwYLaL

No se si es lo que buscas, pero asi queda.
  #5 (permalink)  
Antiguo 28/04/2015, 13:26
 
Fecha de Ingreso: septiembre-2013
Mensajes: 13
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Cómo colocar bloques juntos?

Bien visto, me comí las etiquetas de cierre y tenía divs anidados, aún así no soluciona mi problema, lo que quiero es que en la parrilla de divs que se genere, se coloquen unos al lado de otros y debajo sin márgenes. Si entras en el enlace del primer compañero que contestó al tema verás una muestra de lo que busco
  #6 (permalink)  
Antiguo 29/04/2015, 09:59
Avatar de gran Wakka  
Fecha de Ingreso: septiembre-2007
Mensajes: 712
Antigüedad: 16 años, 6 meses
Puntos: 48
Respuesta: Cómo colocar bloques juntos?

pon "float: left" a los divs. Se irán poniendo al lado hasta que no entren e irán para abajo.
__________________
Información de Series de TV
Buscas o quieres ser redactor? Ofertas redactor web
  #7 (permalink)  
Antiguo 29/04/2015, 10:25
 
Fecha de Ingreso: septiembre-2013
Mensajes: 13
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Cómo colocar bloques juntos?

Cita:
Iniciado por gran Wakka Ver Mensaje
pon "float: left" a los divs. Se irán poniendo al lado hasta que no entren e irán para abajo.
fue lo primero que hice y queda así:
  #8 (permalink)  
Antiguo 02/05/2015, 05:37
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Cómo colocar bloques juntos?

Como ya te han dicho, usa Masonry. Léete bien la documentación y te saldrá como quieres.
__________________
(:
  #9 (permalink)  
Antiguo 04/05/2015, 07:33
 
Fecha de Ingreso: abril-2015
Mensajes: 18
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Cómo colocar bloques juntos?

Puedes utilizar tambien Bootstrap... tambien muy facil y manejable.
http://www.getbootstrap.com/
  #10 (permalink)  
Antiguo 04/05/2015, 15:32
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Cómo colocar bloques juntos?

Cita:
Iniciado por luisJava Ver Mensaje
Puedes utilizar tambien Bootstrap... tambien muy facil y manejable.
http://www.getbootstrap.com/
¿Y cómo lo haces con Bootstrap?
__________________
(:
  #11 (permalink)  
Antiguo 05/05/2015, 01:21
 
Fecha de Ingreso: abril-2015
Mensajes: 18
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Cómo colocar bloques juntos?

Cita:
Iniciado por pzin Ver Mensaje
¿Y cómo lo haces con Bootstrap?
Bootstrap tambien nos permite organizar todo mediante columnas aparte de poder utilizarlo para la parte responsive...
Ya se que Masonry se trata de una cuadricula para que podamos acomodar elementos de la mejor manera posible pero estoy seguro de que con Bootstrap puede realizar el trabajo por el que está preguntando.
Y quizas Si, sea mas preciso lo que Masonry nos ofrece... Pero solo daba otra opción... jeje
Si me equivoco decirmelo :D
  #12 (permalink)  
Antiguo 05/05/2015, 08:33
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Cómo colocar bloques juntos?

Cita:
Iniciado por luisJava Ver Mensaje
Si me equivoco decirmelo :D
Es que Bootstrap no trae nada para eso.
__________________
(:

Etiquetas: bloques, colocacion, divs
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




La zona horaria es GMT -6. Ahora son las 23:40.