Wie middle div den Raum zwischen den Floating-Elementen füllen?

Ich habe drei div Elemente: links, Mitte und rechts. Links und rechts sind fest und schwebend. Was ich will, ist die Mitteldiv, um die Lücke zwischen ihnen zu füllen.Wie middle div den Raum zwischen den Floating-Elementen füllen?

Dies ist mein Code:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     * {border: dotted 1px red;} 
     #left { 
     width: 200px; 
     float: left; 
     } 
     #middle { 
     float: left; 
     } 
     #right { 
     width: 200px; 
     float: right; 
     } 
    </style> 
</head> 
<body> 
    <div id="left" > left </div> 
    <div id="middle"> middle </div> 
    <div id="right" > right </div> 
</body> 
</html>

Alle Ideen, wie dies zu tun? Ich habe verschiedene Lösungen ausprobiert, aber nicht geschafft, was ich will.

Quelle

2013-03-30 Pithikos

Haben Sie versucht, von 'px' zu Prozente Umwandlung? –

Der Schlüssel Ihre HTML zu restrukturieren ist middle zuletzt haben, entfernen Sie die float vom middle und replace it with overflow: hidden.

View fiddle example.

HTML

<div id="left" > left </div> 
<div id="right" > right </div> 
<div id="middle"> middle </div>

CSS

#left { 
    width: 200px; 
    float: left; 
} 
#middle { 
    overflow: hidden; 
} 
#right { 
    width: 200px; 
    float: right; 
}

Quelle

2013-03-31 00:01:16 ScottS

Das wirkt wie ein Zauber! – Pithikos

Erstaunlich, wie viel Wirkung der Auftrag hat, danke. – zpon

Yo, Ihr Link ist kaputt. Keine Chance der Artikel ist noch verfügbar, oder? Auch, Ballin 'und elegante Antwort. Viel afreesh. – Thomas

Ich konnte das Problem replizieren und es mit Prozentsätzen anstelle von absoluten Werten beheben. Da Sie nach etwas flexiblem zwischen den zwei Elementen suchen, sollte dies funktionieren.

#left { 
    width: 20%; 
    float: left; 
    background: #ccc; 
} 
#middle { 
    width: 60%; 
    float: left; 
    display: block; 
    background: #ddd; 
} 
#right { 
    width: 20%; 
    float: right; 
    background: #bbb; 
}

hier ein demo

Quelle

2013-03-30 23:41:21 djthoms

Danke. Das funktioniert, aber ich frage mich, ob es eine Möglichkeit gibt, es mit einer festen Größe für die linken und rechten Divs zu machen. – Pithikos

Wie middle div den Raum zwischen den Floating-Elementen füllen?

Antwort

Verwandte Themen