Startseite: Boxen nebeneinander stellen

Seele · 22. Juli 2016

Hallo zusammen,

ich habe vor in meinem Forum ein paar Sachen zu ändern und teste darum einiges im Testboard.

In der Vorstellung wurden Boxen auf der Startseite (Dashboard) angesprochen die ich nun testen wollte.
Die Boxen konnte ich machen, auch mit farbigem Hintergrund aber ich kriege es nicht hin sie nebeneinander zu stellen.

Es ist erst mal nur ein Testen darum sind noch nicht alle boxen genau gleich von Farbe, Grösse und Form. Das ist ja aber nicht so wichtig wie se aussehen um sie nebeneinander zu kriegen.
Es geht mir hier Grundsätzlich mal nur um das nebeneinander stellen.

Wer sich das mal live ansehen will kann das gerne tun, doch bedenkt das es da nur um eine Testumgebung geht, nicht um das Forum.

Link zum Testboard

Oben dran sind noch andere Boxen, die kämen nur dann ins Forum, wenn das mit den farbigen Boxen nicht klappen sollte.

Lg Seele

Tom · 22. Juli 2016

Dafür nimmst du am besten das Flexbox-Modell:

http://www.html5rocks.com/de/tutorials/flexbox/quick/

Beispiel:

HTML:

HTML

<div class="homepageContent">
    <div class="homepageContentBox1">
    Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1
    Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1      
    </div>
    <div class="homepageContentBox2">
    Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2
    </div>
    <div class="homepageContentBox3">
    Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3
    Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3      
    </div>
</div>

Alles anzeigen

CSS:

CSS

@media screen and (min-width: 801px) {


    .homepageContent {
        display: flex;
    }


    .homepageContentBox1,
    .homepageContentBox2 {
        margin-right: 14px;
    }


    .homepageContent > div {
        width: 32%;
    }    


}


@media screen and (max-width: 800px) {


    .homepageContentBox1,
    .homepageContentBox2 {
        margin-bottom: 14px;
    }


    .homepageContent > div {
        width: 100%;
    }     


}


.homepageContent > div {
    box-sizing: border-box;
    border: 1px solid #000;
    padding: 14px 21px;
    color: #fff;
}


.homepageContentBox1 {
    background: #990000;
}


.homepageContentBox2 {
    background: #009900;
}


.homepageContentBox3 {
    background: #000099;
}

Alles anzeigen

Relevant ist in dem Fall nur das hier:

CSS

.homepageContent {
        display: flex;
    }

Damit kannst du Elemente in einer Reihe ausrichten.

Edit:

Oder so: https://jsfiddle.net/4emLcxy3/

Seele · 22. Juli 2016

Danke Tom,

werde das mal ausprobieren.

Lg Seele

Nachtrag

Es hat geklappt!

hamburger · 23. Juli 2016

Bei mir auch

Startseite: Boxen nebeneinander stellen

cls-design

Informationen

Demoinstallationen

Hilfe