Sin depender de las tablas, lo que podría ser una buena solución para lograr una distribución de las fichas como este: Azulejos de diseño con CSS y HTML que se adapta automáticamente al tamaño de la pantalla del usuario. Es decir, la totalidad de la pantalla debe ser llenado por los azulejos, independientemente de la altura y de la resolución.

Agradezco cualquier idea.

~ Robert

  • Mi ejemplo está aquí: shaquin.tk/experiments/tile.html. @MajoB era, obviamente, la escritura de su ejemplo, al mismo tiempo que yo.
  • Gracias Shaquin. Todos los que he intentado hasta ahora estaba relacionado con un diseño de tabla desde que se enfrentan a problemas con la organización de la flotaba divs. Yo no le presté atención al hecho de que flotan derecho debe venir antes de flotar a la izquierda.
InformationsquelleAutor orschiro | 2012-07-09

4 Comentarios

  1. 16

    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;
    }

    • Usted me ganó por 9 minutos! 🙂
    • También quiero agradecer a usted para su solución. Por qué no utilizar el posicionamiento absoluto como por ejemplo Shaquin en su ejemplo de arriba?
    • Debido a que no era necesario:)
    • Necesitas usar la float o posicionamiento absoluto. El posicionamiento absoluto es más flexible, por ejemplo, usted puede hacer que ciertos elementos se superponen con la ayuda de z-index.
  2. 2

    Me gustaría ir con algunos div utilizando absoluta de posicionamiento. Y especificar para cada una de las baldosas de la anchura/altura/superior/izquierda utilizando % unidad.

    • Probablemente la forma más fácil y mejor solución todo-en torno. Esto doesnt jugar bien cuando el espacio de la pantalla es pequeña, aunque, por lo considere el uso de un respaldo para pantallas pequeñas.
  3. 1

    Sugerencia:

    • El uso de un «div de contenido» con el 100% de la anchura y la altura
    • Uso en el «contenido del div» dos divs: uno para la columna de la izquierda y otro para la derecha. Recuerda darle a los «%» de la dimensión (a «contenido» div también)
    • Recordar que una flota a la derecha div tiene que venir ANTES de a la izquierda div flotante

    Con este tres punto, usted debería ser capaz de tratar de usted mismo.

  4. 0

    Descargo de responsabilidad

    Esto no significa que las necesidades de su proyecto. Que ha sido contestado ya por otros usos.


    Para referencia en el futuro, me gustaría ver en un oocss-enfoque para el diseño de clases. Usted puede tener las páginas que tienen una cantidad diferente de azulejos, etc. Yo uso el siguiente para mis proyectos.

    Azulejos Objeto

    Utilizado para la creación de diseños de baldosas.

    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>

    Dock Objeto

    Muelles de contenido para el 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?

    Otros

    Me gustaría ver a los Azulejos de objetos en la interfaz de usuario de Metro Marco. Se permiten alturas

    http://metroui.org.ua/

    Si usted está buscando un buen sistema de diseño que utiliza proporciones:

    https://github.com/stubbornella/oocss/wiki/Grids

Dejar respuesta

Please enter your comment!
Please enter your name here