Zwei div nebeneinander?

Hallo zusammen,
Ich bin grade absolout am verzweifeln.
Ich muss 2 (bzw später 4) div nebeneinander bekommen, aber irgendwie erscheinen sie immer untereinander. Kann mir da wer helfen?

Answer 1

[KorbiOnRails]

Ich würde an deiner Stelle das Problem mit den Möglichkeiten der Flexbox lösen.

Dazu machst du dir ein Elternelement, in dem alle divs, die nebeneinander angezeigt werden sollen, als Kindelemente vorhanden sind.

Ein Beispiel:

<!-- HTML -->
<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

/* CSS */
#container 
{
    display: flex;
    flex-direction: row;
}

.box
{
    width: 25%;
    height: 250px;
}

Hiermit hast du 4 divs (Boxen) nebeneinander, die jeweils ein Viertel der Gesamtbreite einnehmen und 250 Pixel Hoch sind.

LG

Comments

[Jdjdkdkd166]

Seit wann gibt's sowas?

[Limearts]

@Jdjdkdkd166

Die CSS-Definitionen sind noch recht neu. Seit etwa drei Jahren ist der Code fester Bestandteil der CSS3-Definitionen und war schon einige Jahre zuvor als Testkandidat mit entsprechenden Presets nutzbar.

[phantrash21]

irgendwie geht das nicht, mein 2. div ist immernoch zu weit unten.. :/

Answer 2

[bubbIes]

Wie wäre es mit floating (ist zwar so nicht üblich aber für die 4 boxen auf deiner Seite genügts)

Answer 3

[Jdjdkdkd166]

Gibt bei css doch ein Attribut welches den linebreak setzt. Dieses musst du den beiden divs zuweisen. Dann setzt du den Wert davon auf in-line oder ähnliches, weiß ich nicht mehr

update; es heißt display:inline-block

Answer 4

[Limearts]

Für diese Positionierung bietet sich flexbox im CSS am ehesten an. https://www.w3schools.com/css/css3_flexbox.asp

Auf die Weise gestaltet man Container, die nach vorgegebener Zahl horizontal den verfügbaren Platz einnehmen.

In einfacheren Fällen und früher hätte man auch zur Float-Definition greifen können. Da diese bei der Gestaltung allerdings etwas hakeliger ausfällt als flex, wurde dieser Weg durch das Flexgrid sehr zuverlässig abgelöst.

Woher ich das weiß: Berufserfahrung – selbstständiger Dienstleister und Nerd

Answer 5

[AldoradoXYZ]

Wie wäre es mit layout für den kleinen Mann....table :)

Gruß

Comments

[phantrash21]

..huh?

[AldoradoXYZ]

@phantrash21

Na, bau dir eine Tabelle und pack rein was immer Du in den einzelnen Zellen möchtest.

Die Tabelle selbst kannst Du ja unsichtbar machen.

Gruß