Wie strecke ich zwei div-Elemente, um den verfügbaren horizontalen Raum zu füllen?

Question

Ich hoffe wirklich, dass Sie mir helfen können.

Ich erstellte this fiddle, um zu zeigen, was ich versuche zu tun.

Meine Frage ist: Wie strecke ich zwei div-Elemente, um den verfügbaren horizontalen Raum zu füllen?

Wie Sie sehen können, sind 5 div-Elemente aneinandergereiht, umhüllt von einem div-Element, wo ich die Hintergrundfarbe und Breite mit 100% einstelle.

Es gibt drei div-Elemente mit einer Breite von 50px.

Die Breite der anderen zwei div-Elemente sollte den Rest verfügbaren Platz ausfüllen, sie sollten auch die gleiche Breite haben -> 50% für jede der beiden divs.

Mein Problem ist, dass die 50% für beide Div-Elemente zu 100% Gesamtbreite betragen. Und nicht auf eine verfügbare Platzbreite.

Ich versuche nicht, Tabellen, etc. zu verwenden

Lassen Sie mich wissen, wenn es etwas unklar ist.

EDIT: I'd like to hear your comments about this way.

Answer 1

Eine Möglichkeit, dies zu lösen, ist zu Behandle deine Divs wie die Zellen eines Tisches. Eine einzigartige Eigenschaft von Tabellen ist, dass die Zellen die Breite der Tabelle ausfüllen, unabhängig davon, welche Breite Sie ihnen geben. Indem man einigen Zellen eine Breite gibt, füllen die anderen Zellen den verbleibenden Raum. Durch Verwendung von display:table und display:table-cell können Sie dies nutzen, ohne Ihren HTML-Code zu ändern. Werfen Sie einen Blick auf dieses Beispiel:

http://jsfiddle.net/GyxWm/

ich nicht getestet habe, aber es sollte in allen „aktuellen“ Browsern. Es sollte in IE8 + funktionieren, aber funktioniert wahrscheinlich nicht in IE7 und wird sicherlich nicht in IE6 arbeiten.

Answer 2

Angst Ich denke nicht, Sie können.

Die float:left; entfernt Ihren Code aus dem enthaltenden div und alle Elemente werden nebeneinander angezeigt, sobald ein Element den Bildschirm nach rechts verlässt, wird es unter einem Leerzeichen umgebrochen (ein bisschen wie bei der relativen Positionierung).

Sie versuchen auch, eine feste Breite mit einer variablen Breite zu vergleichen, die nahezu unmöglich ist.

Wenn Sie einen Blick hier: http://jsfiddle.net/P5Kjh/5/

Zuerst habe ich reduziert Ihren Code wieder auf 2 divs und bekam, dass die Arbeit.

Ich habe overflow:hidden der backgroundG-Klasse hinzugefügt, um sicherzustellen, dass es einen grauen Hintergrund gibt und beide Divs links schwebten.

Dann setze ich die Breiten, die kumulative Summe muss um 100% sein, wenn Sie einen Rand zu jedem Element hinzufügen, müssen Sie zu einem kleineren Prozentsatz arbeiten.

Dann habe ich die anderen 3 in einem neuen backgroundG-Element hinzugefügt und eine separate Klasse für das Füllelement erstellt, also wäre es 80% (ohne Rahmen).

Wahrscheinlich hilft Ihnen nicht viel. Entschuldigung wenn nicht.

Prost

Answer 3

Sie können es mit Hilfe von Javascript tun.Ändern div-Tags wie folgt aus:
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>

Und hinzufügen, um dieses Javascript somehwere nach diesen Tags:

    var elem1 = document.getElementById("part1"); 
    elem1.style.width = (screen.width - 150)/2; 
    var elem2 = document.getElementById("part2"); 
    elem2.style.width = (screen.width - 150)/2; 

Und entfernen width:50%; von sectionFillUp in css