Antworten zum Thema „Gefloatete Elemente mit unterschiedlicher Höhe“

[Sargas]

Moin Leute,

ich hab da mal eine Frage. Man sieht ja bei vielen Webseiten immer diese "Feature Blöcke", nenn ich es jetzt mal, das sind dann drei, vier nebeneinander.

Hab hier mal schnell ein Beispiel rausgesucht Der dritte Bereich mit
Every detail detailed

Wenn ich meinen Browser jetzt kleiner ziehe ordnen die sich ja untereinander. Baue ich sowas in der Art nach habe ich immer das Problem, dass an den Stellen wo der Textbereich von einem Block eine Zeile mehr hat als der andere, hängt einer in der Luft und es zerschießt den ganzen Bereich.

Dafür gibt es doch bestimmt eine Lösung, leider weiß ich nicht so recht wonach ich suchen soll. Hab bisher nur das masonry grid gefunden, bin aber auch nicht sicher ob das das ist, was ich brauche.

Danke euch schonmal.

Viele Grüße

sargas

 

[tr4ze]

Meinst du sowas wie clearfix ?

 

[lachender_engel]

...habe ich immer das Problem, dass an den Stellen wo der Textbereich von einem Block eine Zeile mehr hat als der andere, hängt einer in der Luft und es zerschießt den ganzen Bereich.

Mir ist es, ohne Deinen Code zu sehen, kaum möglich eine Fehleranalyse zu betreiben.
Ich vermute mal, dass Du eine feste Höhe vergibst. Gibt es zu viel Text, dann fließt der Text aus der Box. Ist das so? Habe ich das Problem richtig verstanden?
Wenn nicht, gib mir/uns mehr Input. Screenshot, Code, etc...

 

[noltehans]

Wenn nicht, gib mir/uns mehr Input. Screenshot, Code, etc...

lachender_engel war schneller.

 

[Sargas]

Ok, dachte das wäre ein gängiges Problem, hab mal einen Screenshot gemacht, hoffe dadurch wird es klarer:



Wenn ich mein Browserfenster zusammenschiebe wird auch der Text zusammengeschoben und sobald dadurch, wie im Bild zu sehen ein Block eine Zeile mehr Text hat, sind die Blöcke nicht mehr schön zwei und zwei untereinander, sondern es entsteht dieser Leerraum.

Das Ganze ist über media queries so geregelt, dass bei voller Breite drei Blöcke nebeneinander sind, dann zwei und bei ganz schmalen Dispays eben alle untereinander.

 

[lachender_engel]

Aha. Da war @tr4ze schon auf der richtigen Spur. Hat wohl eine bessere Glaskugel als ich
Für Dich @Sargas habe ich den Link hier. Da ist die Lösung gut beschrieben.

 

[Sargas]

Ok, danke dir schonmal. Das heißt dann ich muss um jeden "Block" ein div mit der Klasse clearfix legen oder muss ich alle Blöcke in dieses div packen?

 

[tr4ze]

Ok, danke dir schonmal. Das heißt dann ich muss um jeden "Block" ein div mit der Klasse clearfix legen oder muss ich alle Blöcke in dieses div packen?

Früher ja, heute macht man das mit Pseudoelementen :before und :after
In dem obigen Beispiel ist das auch so umgesetzt.

 

[Sargas]

Hm... irgendwie ändert sich da nix, Problem bleibt bestehen. Hier mal mein HTML ohne den Text.

<section class="features">
            <div class="feature clearfix">
                <img>" title="" alt="">
                <h1>BlaBla</h1>
                <p></p>
            </div>

<div class="feature clearfix">
                <img>" title="" alt="">
                <h1>BlaBla</h1>
                <p></p>
            </div>

<div class="feature clearfix">
                <img>" title="" alt="">
                <h1>BlaBla</h1>
                <p></p>
            </div>

<div class="feature clearfix">
                <img>" title="" alt="">
                <h1>BlaBla</h1>
                <p></p>
            </div>

<div class="feature clearfix">
                <img>" title="" alt="">
                <h1>BlaBla</h1>
                <p></p>
            </div>

<div class="feature clearfix">
                <img>" title="" alt="">
                <h1>BlaBla</h1>
                <p></p>
            </div>
        </section>

Und das CSS, clearfix ist aus dem HTML 5 Boilerplate:

.clearfix:before,
.clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}

.feature {
    max-width: 33.33333%;
    text-align: center;
    float: left;
    padding: 0 15px;
    padding-bottom: 75px;
}

@media only screen and (max-width: 980px) {
    .feature {
        max-width: 50%;
    }

}

@media only screen and (max-width: 670px) {
    .header-content h1 {
        font-size: 48px;
        font-size: 3rem;
    }
    .feature {
        max-width: 100%;
     }

 

[tr4ze]

gib mal deinem section Tag einen clearfix.

Ediths Lesetip -> http://little-boxes.de/lb1/14-containing-floats.html

 

[Sargas]

Das ändert auch nix.

Link schaue ich mir mal an, danke

 

[tr4ze]

Ahhh, ich hatte überlesen das du unterschiedliche Höhen hast.
Das funktioniert mit Floats nicht, die brauchen eine fixe Höhe.

Aber mit diesem Hack geht es trotzdem -> http://jsbin.com/heraxogibo/edit?html,css,output

Hier wird erklärt wie es funktioniert -> https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

 

[Sargas]

Ahhh, ich hatte überlesen das du unterschiedliche Höhen hast.
Das funktioniert mit Floats nicht, die brauchen eine fixe Höhe.

Aber mit diesem Hack geht es trotzdem -> http://jsbin.com/heraxogibo/edit?html,css,output

Hier wird erklärt wie es funktioniert -> https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Gibt es in dem Fall denn eine Alternative zu floats?

Ah, vergiss die Frage...

Es funktioniert jetzt, danke euch allen.

 

[dn3d_fanboy]

Ich vermute mal, du möchtest so etwas wie hier haben:

Hier habe ich es so geregelt, das die einzelnen Boxen eine feste Höhe haben. Da ich, genau wie du, zukünftig dort auch verschiedene Höhen zulassen möchte, ohne dass ich dort ein riesiges durcheinander bekomme, bin ich folgendemaßen vorgegangen:

Die umschließende Box bekommt display: table,
die Childelemente display: table-cell

Dann sieht es aus wie hier:

 

[Sargas]

Danke dir, ich habe es jetzt schon so geregelt, wie in dem Link von @tr4ze beschrieben. Das funktioniert soweit für mich. Aber immer gut eine Alternative zu haben.