Nachrichten zweispaltig

[be-tina]

Ich würde die Nachrichten gerne zweispaltig ausgeben (eigentlich dreispaltig, aber da sehe ich gar keine Lösung ohne feste Höhe).

Dafür habe ich alle ungeraden Beiträge (even) nach links floaten lassen und die geraden Beiträge (odd) nach rechts.

Jetzt entsteht aber manchmal eine Lücke und ich weiß nicht, wie ich das lösen kann.

Zu sehen hier:
http://www.cafe-denk.de/aktuelles-cafe-denk.html

Der 4. Beitrag soll direkt unter dem 2. stehen, also immer unabhängig von den links gefloateten Elemten sein. Das bekomme ich einfach nicht hin und ich finde meinen Denkfehler nicht.

Der CSS-Code:

.layout_latest {
    width:45%;
    clear:none;
    margin-top:5%;
    margin-right:5%;
    padding:2rem;
    vertical-align:top;
    background-color:#$pri2;
    border:2px solid #1;
    border-radius:2px;
}

.layout_latest.even {
    float:left;
    clear:left;
}

.layout_latest.odd {
    float:right;
    clear:right;
} 

[Spooky]

So wie es jetzt aussieht ist es korrekt. Das was du haben möchtest kannst du nur mit JavaScript (zB Masonry und Konsorten) oder Flex Boxen umsetzen.

[be-tina]

Ah, ok. Also kein Denkfehler sondern einfach die CSS-Grenzen erreicht.

Kann man denn Flexbox einsetzen oder gibt es noch zu viele Browser, die das nicht interpretieren können?

[Spooky]

Die CSS Grenze generell nicht. Nur die Grenze von float

[manoelo]

.deine_klasse:nth-child(2n+1)
{
clear: both;
}

dann bricht es nach jedem zweiten element um egal ob verschiedene höhe

manoelo

[Spooky]

Dadurch würde alles untereinander stehen.

[jscholtysik]

Hi be-tina,


Flexbox wird mittlerweile von allen Browsern unterstützt:

http://caniuse.com/#search=flex

Damit kannst Du das bestimmt umsetzen, da geht sogar ein dreispaltiges Layout, das ist meiner Meinung nach sogar prädestiniert für die Flexbox.

Hier ein kleines Tutorial zur Flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[manoelo]

.layout_latest:nth-child(2n+1) {
clear: both;
}
.layout_latest {
background-color: #f5e4c1;
border-radius: 2px;
clear: none;
float: left;
margin-right: 5%;
margin-top: 5%;
padding: 2rem;
vertical-align: top;
width: 45%;
}

Gruß manoelo

[manoelo]

.layout_latest.even {
float:left;
clear:left;
}

.layout_latest.odd {
float:right;
clear:right;
}
braucht man natürlich nicht mehr

[be-tina]

@manoelo: Das hatte ich zwischendurch auch. Dann entstehen aber trotzdem Lücken, wenn zwei nebeneinander stehende Beiträge verschiedene Höhen haben.

Ich beschäftige mich nochmal mit Flexbox. Da habe ich bisher nicht viel mit gemacht, weil ich dachte, das gibt Chaos in den Browsern. Aber inzwischen klappt das offensichtlich gut.

Danke für all eure Tipps!

[Andreas]

Mit float bauchst du nur das hier:

/* 2-spaltig */

.layout_latest {
    float: left;
    width: 45%; /* hast du bereits */
}
.layout_latest:nth-child(2n+1) {
    background: red;
    clear: both;
}


/* 3-spaltig */

.layout_latest {
    float: left;
    width: 28.3333%;
}
.layout_latest:nth-child(3n+1) {
    background: red;
    clear: both;
} 

Du hast irgendwie zu viel CSS aufgesetzt. Vor Allem das float:right brauchst du nicht.

Wenn du die dann noch zentriert haben möchtest (rechts und links gleicher Abstand), gibt es da einen Trick. Gib den Elementen Margin-Left (und Margin-Bottom). Dann ziehst du die ganze Liste mit dem gleichen Margin-Left, aber negativ, nach links.

/* 3-spaltig */

.mod_newsarchive {
    margin-left: -5%;
}
.layout_latest {
    float: left;
    width: 28.3333%;
    margin-left: 5%;
    margin-bottom: 5%;
}
.layout_latest:nth-child(3n+1) {
    background: red;
    clear: both;
} 

Hier trotzdem noch ein Link zu nem Flexbox-Generator http://the-echoplex.net/flexyboxes/