it-swarm.com.de

Fliesenlayout mit CSS und HTML

Was wäre eine gute Lösung, um ein Kachel-Layout wie dieses zu erstellen, ohne sich auf Tabellen zu verlassen: tile layout das passt sich automatisch an die Bildschirmgröße des Benutzers an. Das heißt, der gesamte Bildschirm sollte unabhängig von der Höhe und der Höhe der Auflösung von den Kacheln ausgefüllt werden.

Ich freue mich über alle Ideen.

~ Robert

17
orschiro

Hier ist ein Arbeitsbeispiel: 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;
}

Das

14
Marian Ban

Ich würde mit einer div gehen, die absolute Positionierung verwendet. Und geben Sie für jede Kachel die Breite/Höhe/oben/links mit %-Einheit an.

2
Py.

Hinweis:

  • Verwenden Sie ein "content div" mit 100% Breite und Höhe
  • Verwenden Sie in "content div" zwei divs: eine für die linke und eine für die rechte. Denken Sie daran, diese Dimension "%" anzugeben (auch für "content" div).
  • Denken Sie daran, dass ein floated-rechter div VOR ein linker float-div sein muss

Mit diesem Punkt sollten Sie sich selbst versuchen können.

1
DonCallisto

Haftungsausschluss

Dies bedeutet nicht die Bedürfnisse Ihres Projekts. Das wurde bereits von anderen Verwendungen beantwortet.


Für eine spätere Bezugnahme würde ich einen Oocss-Ansatz für Layoutklassen betrachten. Möglicherweise haben Sie Seiten mit einer anderen Anzahl von Kacheln usw. Ich verwende Folgendes für meine Projekte.

Kacheln Objekt

Wird zum Erstellen von Kachel-Layouts verwendet.

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-Objekt

Dockt Inhalte an den Bildschirmrand an.

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?

Andere

Ich würde mir das Tiles-Objekt im Metro UI Framework ansehen. Sie erlauben Höhen

http://metroui.org.ua/

Wenn Sie nach einem guten Layoutsystem suchen, das Proportionen verwendet:

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

0
Eric Harms