Tema: Imágenes y multicolumnas en css3
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 12/11/2010, 13:25
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Imágenes y multicolumnas en css3
la propiedad que debería controlar ese comportamiento es:
Código CSS: 
Ver original
  1. column-span: all;
Pero mucho me temo que es aún soportada e interpretada de aquella manera por los distintos navegadores.
Sólo hice unas pruebas muy rápidas en firefox 3.6 y chrome 7con el siguiente código:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6. <style type="text/css">
  7.  * {
  8.     margin: 0;
  9.     padding: 0;
  10.     border: 0;
  11.     outline: 0;
  12.   }
  13. div {
  14.   background: #00B0F0;
  15.   height: 350px;
  16.   -moz-column-width: 20em;
  17.   -moz-column-gap: 2em;             
  18.   -moz-column-rule: 4px solid #FF6600;
  19.   -webkit-column-width: 20em;
  20.   -webkit-column-gap: 2em;              
  21.   -webkit-column-rule: 4px solid #FF6600;
  22.   padding: 5px;      
  23. }
  24. p { font-size: 14px; background: #CCFFFF;}
  25. img {-moz-column-span: all; -webkit-column-span: all; width: 30em; margin-left: -5em;display:inline-block; float: left;}
  26. </style>
  27. </head>
  28. <body>
  29.     <div>
  30.         <p>Lorem ipsum dolor sit amet consectetuer Lorem tincidunt et et interdum. Cursus Phasellus et Phasellus id Suspendisse nonummy id tempus orci vestibulum. Felis congue dui eget consectetuer. Sed Integer Donec lobortis pretium lacus. Pede ac lacinia netus eros neque sed non Nulla tortor urna. Ullamcorper netus ac amet orci odio Vivamus Lorem ultrices eget nibh. Aliquam Lorem Nulla orci tristique sem convallis.</p>
  31. <p>Fusce magna lacinia tincidunt vitae consectetuer leo aliquet justo venenatis ante. Interdum sagittis Phasellus metus Vestibulum Vestibulum vitae nunc eu odio ullamcorper. Curabitur Vestibulum tincidunt laoreet Donec laoreet eget Ut Phasellus mauris eget. Facilisis ac nulla nisl Cum wisi dictum Nulla a aliquam nibh. Pretium augue justo a faucibus velit lacinia Vivamus et felis consequat. Ut wisi congue malesuada nunc sem Quisque parturient tortor pretium Curabitur. Congue Nullam.</p><img src="yugo.jpg" alt="alt" />
  32. <p>Libero sit vitae quis Quisque a leo augue nunc et sit. Vitae libero malesuada Aenean nibh laoreet at at et lobortis justo. Pellentesque wisi consectetuer facilisis dolor mi parturient laoreet amet tincidunt tortor. Pede sit amet justo Donec et id In Aliquam malesuada elit. Integer lacus pretium accumsan Aenean at Vestibulum ante ut quis laoreet. </p>
  33. <p>Dui Nullam commodo adipiscing orci cursus parturient venenatis convallis purus ligula. Tellus lobortis vel felis mauris Maecenas leo Nunc nascetur tortor Sed. Morbi ut neque eget nibh egestas mi nec orci justo metus. Vestibulum auctor dignissim tristique nulla ullamcorper Vestibulum sit consequat Donec tincidunt. Ipsum elit mauris leo sagittis vitae ipsum Curabitur sit lobortis sed. Lobortis Pellentesque laoreet Donec Ut.</p>
  34. <p>Libero sit vitae quis Quisque a leo augue nunc et sit. Vitae libero malesuada Aenean nibh laoreet at at et lobortis justo. Pellentesque wisi consectetuer facilisis dolor mi parturient laoreet amet tincidunt tortor. Pede sit amet justo Donec et id In Aliquam malesuada elit. Integer lacus pretium accumsan Aenean at Vestibulum ante ut quis laoreet. </p>
  35. <p>Dui Nullam commodo adipiscing orci cursus parturient venenatis convallis purus ligula. Tellus lobortis vel felis mauris Maecenas leo Nunc nascetur tortor Sed. Morbi ut neque eget nibh egestas mi nec orci justo metus. Vestibulum auctor dignissim tristique nulla ullamcorper Vestibulum sit consequat Donec tincidunt. Ipsum elit mauris leo sagittis vitae ipsum Curabitur sit lobortis sed. Lobortis Pellentesque laoreet Donec Ut.</p>
  36. <p>Libero sit vitae quis Quisque a leo augue nunc et sit. Vitae libero malesuada Aenean nibh laoreet at at et lobortis justo. Pellentesque wisi consectetuer facilisis dolor mi parturient laoreet amet tincidunt tortor. Pede sit amet justo Donec et id In Aliquam malesuada elit. Integer lacus pretium accumsan Aenean at Vestibulum ante ut quis laoreet. </p>
  37. <p>Dui Nullam commodo adipiscing orci cursus parturient venenatis convallis purus ligula. Tellus lobortis vel felis mauris Maecenas leo Nunc nascetur tortor Sed. Morbi ut neque eget nibh egestas mi nec orci justo metus. Vestibulum auctor dignissim tristique nulla ullamcorper Vestibulum sit consequat Donec tincidunt. Ipsum elit mauris leo sagittis vitae ipsum Curabitur sit lobortis sed. Lobortis Pellentesque laoreet Donec Ut.</p>
  38.     </div>
  39. </body>
  40. </html>
Y esto es lo que hace cada uno: