2 Bereiche nebeneinander

[Bourbon]

Hallo Leute,

ich habe mal eine allgemeine Frage.
Jeder kennt das sicherlich:
Man will zwei Sachen nebeneinander stehen haben.
Zum einen gibt es da ja die Möglichkeit, 2 divs (entsprechend formatiert) nebeneinander stehen zu lassen.
Das Ganze funktioniert dann ja auch ganz prima mit Zeilenumbrüchen etc.

Meine Frage wäre jetzt:
Gibt es da vielleicht noch ein andere Methode, die eventuell genau darauf ausgelegt ist? Es kann ja sein, dass mit HTML5 was dazu gekommen ist, das ich noch nicht kenne :)

 

[Nitamud]

Da gibt es einiges an Möglichkeiten:


-display: inline/inline-block;
-float: left/right;
-display: flex;(Flexboxen)

Wenn sich die nebeneinanderstehenden Inhalte an die Größe des Bildschirms anpassen solle, sind wohl Flexboxen das am Ehesten zu Empfehlende.(einziger Nachteil: Browsersupport derzeit) Im Grunde kannst du ein einfaches nebeneinanderstehen aber mit allen genannten Dingen erreichen.

 

[Chronos]

Meinst du das so ^^?
http://jsfiddle.net/ahjh26y3/

.box {   
    float: left;   
    margin-right: 5px;
    width: 150px;
    height: 150px;
    background: gray;
}

 

[Bourbon]

Ja so in etwa.
Ich hätte es gerne wie zwei Spalten, die aber auch bei geringerer Bildschirmauflösung nebeneinander und nicht untereinander sind.
So wie bspw. zwei Spalten einer Tabelle.
Mit Flexboxen habe ich das bisher nicht so richtig hinbekommen.

Oder um es mal plastisch zu machen:

Ich habe Links in der Spalte nur "URL" stehen und rechts in der Spalte den Link.
Aufgrund der Zeilenumbrüche sind die beiden Divs dann nicht mehr nebeneinander, der Link rutscht unter URL.

So sieht der Code aus:

        echo   "<div><div class='divleft170'>URL: </div>                        <div class='divright'>$url</div></div><hr>";

CSS:

.divleft170 {
    width: 170px;
    display: inline-block;
}

.divright {
    display: inline-block;
    margin-left: 170px;
}

 

[Chronos]

Ich hab auch noch nicht so oft etwas mit Flexbox gemacht darum wusste ich jetzt nicht, wie ich z. B. der linken Spalte eine feste Größe gebe, die rechte aber variabel in der Breite ist, aber ich hab mal was probiert ^^:

http://jsfiddle.net/29rL7vyj/1/

<div class="flex-box">
    <div class="flex-item"></div>       
    <div class="flex-item"></div>
</div>

.flex-box {
    display: flex;
    height: 300px;   
    background: gray;
}

.flex-item {
    flex: 1;
    border-right: 2px solid #000;
    background: green;
}

 

[Bourbon]

Klasse!

Genau so soll das funktionieren! Ist ja der Hammer! :)

 

[Nitamud]

Bitte entfernen..

 

[Nitamud]

Bitt entfernen

 

[Nitamud]

Bitte entfernen

 

[Nitamud]

Beiträge bitte enfernen...

Kommen nicht von mir...

Hatte mein Handy rumliegen und da wollte sich wohl jemand einen Spass erlauben, tut mir leid...

 

[Bourbon]

Irgendwie ist das auch lustig :)