Sin depender de las tablas, ¿cuál sería una buena solución para lograr un diseño de mosaico como este: 
que se adapta automáticamente al tamaño de pantalla del usuario. Es decir, toda la pantalla debe llenarse con los mosaicos, independientemente de la altura y el alto de la resolución.Diseño de mosaico con CSS y HTML
Agradezco cualquier idea.
~ Robert
Aquí es un ejemplo de trabajo: jsfiddle
HTML:
<div class="container">
<div class="first">first</div><div class="third">third</div>
<div class="second">second</div><div class="fourth">fourth</div><div class="last">last</div>
</div>
CSS:
html, body, .container
{
height: 100%;
min-height: 100%;
}
.first {
float: left;
width: 20%;
height: 30%;
background-color: red;
}
.second{
float: left;
width: 20%;
height: 70%;
background-color: green;
}
.third{
float: right;
width: 80%;
height: 80%;
background-color: blue;
}
.fourth {
float: right;
width: 40%;
height: 20%;
background-color: #DDDDDD;
}
.last{
float: right;
width: 40%;
height: 20%;
background-color: yellow;
}
¡Me ganaste por 9 minutos! :-) –
También quiero agradecerle por su solución. ¿Por qué no usas el posicionamiento absoluto como por ejemplo Shaquin en su ejemplo anterior? – orschiro
@orschiro Porque eso no era necesario :) –
me gustaría ir con un poco de div usando absolute positionning. Y especifique para cada mosaico el ancho/alto/arriba/izquierda usando la unidad %.
Probablemente la solución más fácil y mejor en todos los sentidos. Sin embargo, no se juega bien cuando el espacio en la pantalla es pequeño, así que considere usar un respaldo para pantallas pequeñas. – Artefact2
Pista:
Con este tres puntos, que deben ser capaz de probarse a sí mismo.
Negación
Esto no significará las necesidades de su proyecto. Eso ya ha sido respondido por otros usos.
Para referencia futura, consideraría un enfoque oocss para las clases de diseño. Puede tener páginas que tengan una cantidad diferente de mosaicos, etc. Uso lo siguiente para mis proyectos.
Se utiliza para crear diseños de mosaicos.
css
.tiles
{
display: block;
}
.tiles__item
{
display: block;
height: auto;
float:left;
}
.tiles--2
{
margin-left: -4%;
}
.tiles--3
{
margin-left: -2%;
}
.tiles--4
{
margin-left: -2%;
}
.tiles--2 .tiles__item
{
margin-left: 4%;
width: 46%;
}
.tiles--3 .tiles__item
{
margin-left: 2%;
width: 31.3%;
}
.tiles--4 .tiles__item
{
margin-left: 2%;
width: 23%;
}
html
<div class="tiles tiles--2">
<div class="tiles__item">
</div>
<div class="tiles__item">
</div>
</div>
Docks contenido al borde de la pantalla.
css
.dock
{
position: absolute;
height: auto;
width: auto;
}
.dock--t
{
width: 100%;
top: 0;
}
.dock--b
{
width: 100%;
bottom: 0;
}
.dock--l
{
height: 100%;
left: 0;
}
.dock--r
{
height: 100%;
right: 0;
}
html
<div class="dock dock--t">
The content will be docked to the top of the screen.
</div?
me gustaría ver el objeto Azulejos en el marco de interfaz de usuario Metro. Permiten alturas
Si está buscando un buen sistema de diseño que utiliza proporciones:
Mi ejemplo es aquí: http://shaquin.tk/experiments/tile .html. @MajoB obviamente estaba escribiendo su ejemplo al mismo tiempo que yo. –
Gracias Shaquin. Todo lo que probé hasta ahora estaba relacionado con el diseño de una mesa, ya que tengo problemas para organizar los divs flotantes. No le presté atención al hecho de que la flotación derecha debe venir antes de que flote a la izquierda. – orschiro