Wie kann ich die Strecke zwei div-Elemente zu füllen verfügbare horizontale Platz?

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

Ich erstellt diese Geige zu zeigen, was ich zu tun versuche.

Meine Frage ist: Wie kann ich Strecken zwei div-Elemente zu füllen verfügbare horizontale Platz?

Wie Sie sehen können, gibt es 5 div-Elemente aneinander gereiht, umhüllt von einem div-element, wo ich die hintergrund-Farbe und die Breite mit 100%.

Gibt es drei div-Elemente mit einer Breite von 50px.

Die Breite der anderen beiden div-Elemente füllen sollten, bis der rest auch Platz, Sie sollten die gleiche Breite, auch ->50% für jede der beiden divs.

Mein problem ist, dass die 50% für die beiden div-Elemente betragen 100% Gesamt-Breite. Und nicht um eine Verfügung Raum-Breite.

Ich versuche, nicht zu verwenden, Tabellen, etc.

Lassen Sie mich wissen, wenn es etwas unklar.

BEARBEITEN:
Ich würde gerne hören, Ihre Kommentare über diese Weise.

  • Mit display: table-cell ist das richtige warum zu gehen, unter Berücksichtigung Ihrer Anforderungen, solange Sie nichts dagegen haben, nicht unterstützt IE6. Eventuell eine alternative in einer IE6-only-style-sheet.
InformationsquelleAutor Teleport | 2010-12-02
  1. 5

    Einen Weg, dies zu lösen, um die Behandlung Ihrer divs wie die Zellen einer Tabelle. Eine einzigartige Eigenschaft von Tabellen ist, dass die Zellen füllen die Breite der Tabelle, egal, was die Breite, die Sie Ihnen geben. Indem einige Zellen eine Breite, die anderen Zellen füllen den übrigen Raum. Durch die Verwendung display:table und display:table-cell können Sie nutzen diese ohne änderung Ihrer html. Haben Sie einen Blick auf dieses Beispiel:

    http://jsfiddle.net/GyxWm/

    Habe ich nicht getestet, es sollte aber bei allen "aktuellen" Browsern. Sollte es funktionieren im IE8+, aber wahrscheinlich nicht funktioniert im IE7 und sicherlich funktioniert nicht in IE6.

    • Das ist toll. Ich habe eine fast ähnliche Lösung vor. Ich wusste nicht, dass display:table-cell; erweitert sich. Genial.
    • Nur noch eine Letzte Sache: Wie kann ich einstellen overflow:hidden;?Das div text sollten eine Reihe Höhe von 44px und eine Breite. Irgendeine Idee?
    InformationsquelleAutor Simon Dyson
  2. -1

    Können Sie es mit Hilfe von javascript. Ändern Sie die div-tags wie diese:

    <div id="part1" class="sectionFillUp">section2</div>

    <div id="part2" class="sectionFillUp">section4</div>

    Und fügen Sie diese javascript-irgendwo, nachdem diese 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%; aus sectionFillUp in css

    • Das ist clever. Aber leider bin ich auf der Suche für eine Reine CSS-Lösung.
    InformationsquelleAutor Caner
  3. -2

    Angst, ich glaube nicht, Sie können.

    Den float:left; entfernt Ihre-code vom übergeordneten div-Element und alle Elemente, die am Ende neben einander, sobald ein element verlässt den Bildschirm auf der rechten Seite, er wickelt sich unterhalb so dass ein Platz (ein bisschen wie die relative Positionierung macht).

    Auch, Sie versucht, zu vergleichen eine Feste Breite mit variabler Breite, die in der Nähe unmöglich.

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

    Zunächst reduzierte ich Ihren code wieder auf 2 divs und habe das arbeiten.

    Habe ich overflow:hidden zu den backgroundG-Klasse, um sicherzustellen, dass es ist ein grauer hintergrund und schwebte beiden divs Links.

    Dann setze ich die Breite, die Gesamtsumme hat sich um rund 100%, wenn Sie einen Rahmen hinzufügen, um jedes element, das Sie brauchen, um zu arbeiten, um einen kleineren Prozentsatz.

    Dann habe ich wieder die anderen 3 in eine neue backgroundG-element und erstellt eine separte Klasse für die fillup-element, so würde es 80% (ohne Rahmen).

    Wahrscheinlich nicht helfen, eine Menge. sorry, wenn nicht.

    Cheers

    • Vielen Dank für deine Antwort und für deinen Tipp mit dem float:left; Dort ist eine Klingel. Ich bin jetzt drauf und werde Euch wissen lassen ob es geklappt hat 🙂
    InformationsquelleAutor Luke Duddridge
Schreibe einen Kommentar