Kann ich Überlauf verwenden: irgendwie ohne explizite Höhe versteckt?

Ich habe ein Bild mit float:left, und ich möchte, dass es seine Eltern überläuft, aber den Überlauf abgeschnitten. Hier ist, was es sieht aus wie ohne overflow Regeln:Kann ich Überlauf verwenden: irgendwie ohne explizite Höhe versteckt?

enter image description here

Hier ist, was ich will:

enter image description here

Hier ist eine Geige: http://jsfiddle.net/ZA5Lm/

For some reason es, dass overflow:hidden ohne explizite Höhe ergibt das Element entschieden wurde, wächst.

Kann ich irgendwie den gewünschten Effekt erreichen, ohne eine explizite Höhe einzustellen? Eine explizite Höhe funktioniert nicht, da diese Größe automatisch anhand der Länge des Inhalts und der Browserbreite angepasst werden soll.

Quelle

2012-03-30 Roman Starkov

Haben die Bilder eine feste Breite? – Jon

'overflow: hidden' (oder ein anderer Wert als' visible') bewirkt, dass eine Box einen Blockformatierungskontext erzeugt, in dem Floats enthalten sind. Die Erweiterung der Box zu ihren Schwimmern ist nur eine der Nebenwirkungen, wenn die Box "height: auto" (keine explizite Höhe) hat. Ich kann keine Erklärung finden für * warum * genau ein "Überlauf", der nicht "sichtbar" ist, erzeugt einen BFC, aber es tut es. – BoltClock

Was soll das tun, wenn Sie die Größe des Ansichtsfensters ändern [wie hier] (http://jsfiddle.net/YvEcK/)? – user123444555621

Meiner Meinung nach Verwendung von Überlauf: Versteckt ohne Einstellung Abmessungen macht keinen Sinn. Wenn Sie nicht möchten, dass die Höhe des Behälters spezifizieren und wenn Ihre Bilder eine feste Breite haben Sie diese Lösung verwenden: ist http://jsfiddle.net/ZA5Lm/11/

Das Bild mit absoluten positioniert, es aus dem text- Einnahme fließen. Allerdings - und ich bin mir bewusst, dass dies hässlich sein kann - müssen Sie einen Padding-Link angeben, um den Text vom Bild weg zu bewegen.

Quelle

2012-03-30 11:44:04

Danke, ich denke, Ihre Lösung wird akzeptabel sein, wird versuchen und sehen. Ich bin jedoch neugierig, warum Sie Überlauf denken: versteckt macht keinen Sinn ohne eine _explicit_ Größe. Beachten Sie, dass das übergeordnete Element eine bestimmte Größe hat, unabhängig davon, ob Größen explizit festgelegt sind. –

Mit Elternelement meinen Sie das ** div **? Seine Höhe hängt von seinem Inhalt ab (wenn keine Höhe angegeben ist). Das div kann nicht mit dem Text wachsen und die Bildhöhe ignorieren. Überlauf kann sich nur verstecken, wenn es eine Grenze hat, deshalb sage ich, dass es keinen Sinn ergibt. –

Ich meine die Div. Ohne Überlauf: versteckt es _does_ wächst mit dem Text und ignoriert die Bildhöhe. In dieser Situation hat das div bekannte Ränder, das Bild hat bekannte Ränder, also ist das einzige, was übrig bleibt, sie zu schneiden und das Bild entsprechend zu beschneiden. Ist das nicht perfekt definiert? –

Ich habe einen Beitrag über CSS-Tricks gesehen und darüber gesprochen. Go check it out, bei - http://css-tricks.com/minimum-paragraph-widths/

Es könnte nützlich sein :) Viel Glück

auch nur auf den Code sah und ich fügte float: Recht auf Ihre div so sieht es so aus -

div { 
border: 1px solid black; 
padding: 10px; 
float: right 
/*overflow: hidden;*/ 
}

Nicht sicher, ob das was du willst?

Quelle

2012-03-30 11:27:58

Nur versucht, dass - es scheint nicht das Ergebnis so aussehen, wie ich in meiner Frage gezeigt, was bedeutet, dass es nicht was ich will :) –

Es ist ein bisschen schwierig (I relativ + absolute Positionierung und eine spezielle Polsterung verwenden, um Text zu positionieren), aber es funktioniert der Effekt, den Sie ohne Markup Ändern gefragt oder Einstellung height:

body { 
    padding: 10px; 
} 
img { 
    float: left; 
    position: absolute; 
    left : 10px; 
} 
div { 
    border: 1px solid black; 
    padding: 10px 10px 10px 280px; 
    position : relative; 
    overflow: hidden; 
}

I eingefügt Stil nur (auch wenn float:left wäre nicht mehr nötig)

Quelle

2012-03-30 11:49:34 fcalderan

Kann ich Überlauf verwenden: irgendwie ohne explizite Höhe versteckt?

Antwort

Verwandte Themen