Divs sich überlappen, wie Sie zu beheben? CSS

Möchte ich an position zwei divs nebeneinander, die untereinander sonst.

Div 1 Div 2
----  ----
|  |  |  |
|  |  |  |
----  ----

Was am Ende passiert, aber mit meinem code so weit ist, dass Sie sich überlappen, ähnlich diesem:

-----
|| ||
|| ||
-----

Dies ist mein code bisher:

@media screen and (min-width: 40rem) and (max-width: 60rem) {
    #div1 {
        position: absolute;
        left: 0px;
    }
    #div2 {
        position: absolute;
        right: 0px;
    }
}

Wie Sie sehen können ich möchte Platz der div #div2 auf der rechten Seite, während die andere bleibt auf der linken Seite.
Auch ich möchte dies nur geschehen, wenn das browser-Fenster ist zwischen 40 und 60 rem Breite.

Aber mit meinem code, die Sie überlappen. Ich will, dass Sie platziert werden fein säuberlich nebeneinander.

Wäre toll, wenn ich könnte etwas Hilfe.

  • float left und float right ist eine Möglichkeit?
  • was sind Ihre breiten -, und dem, was andere CSS-Eigenschaften zu, die Sie Erben von Vorschriften außerhalb dieses media query ? Eine funktionsfähige demo wird helfen, eine Menge.
  • Funktioniert nicht, komischerweise. Dann die div2 platziert werden unterhalb der div1.
  • Sollte poste ich den ganzen code?
  • Scheint, wie es passiert ist bc der Bildschirm ist zu klein, um die beide divs. Ich bin mir nicht sicher, obwohl. Können Sie zeigen einen screenshot?
  • Ich poste den code auf jsfiddle. EDIT: ich glaube nicht, dass es funktionieren würde, da gibt es Bilder beteiligt.
  • EDIT: Wirklich sehr Leid, Jungs, gehen für etwa 2 Stunden, es wird auf dich zurückkommen, vielen Dank für die Hilfe bisher

InformationsquelleAutor LoLei | 2014-11-04
  1. 1

    Versuchen Sie bitte Folgendes:

    @media screen and (min-width: 40rem) and (max-width: 60rem) {
    #div1 {
        float: left;
        width: 200px; /* change this value to your own needs */
    }
    #div2 {
        float: right;
        width: 200px; /* change this value to your own needs */
    }
}

    Nächste mal, es wäre wirklich hilfreich, wenn Sie ein Beispiel des Codes in jsfiddle.net

    InformationsquelleAutor Andres SK
  2. 0

    Den wrapper der zwei divs gibt es nicht oder ist einfach nicht breit genug. Sollte dies funktionieren:

    #wrapper {
    position: relative;
    width: 100%;
}

#leftDiv {
    position: absolute;
    left: 0px;
    width: 100px;
    border: 1px dotted red;
}

#rightDiv {
    position: absolute;
    right: 0px;
    width: 100px;
    border: 1px dotted red;
}

<div id="wrapper">
    <div id="leftDiv">On the left side</div>
    <div id="rightDiv">On the right side</div>
</div>

    Könnte man auch einfach schweben beide auf der linken Seite, aber ich denke, Sie müssen zur Nutzung der absoluten Positionierung.

    InformationsquelleAutor JasonK
  3. 0

    Dir geposteten code funktioniert Prima, wie es ist, wenn die beiden divs passen (die Summe Ihrer breiten) side-by-side im Bereich zwischen 40rem und 60rem

    Demo auf http://jsfiddle.net/gaby/xb6smptx/1/

    Wenn Sie nicht passen, dann müssen Sie möglicherweise ändern Sie den Bereich der Medien-Abfrage, oder ändern Sie die Spaltenbreite in das media-query zu 50% als Beispiel

    @media screen and (min-width: 40rem) and (max-width: 60rem) {
    #div1 {
        position: absolute;
        left: 0px;
        width:20rem; /*example width that can fit side by side with the div2 width*/
    }
    #div2 {
        position: absolute;
        right: 0px;
        width:20rem; /*example width*/
    }
}

    http://jsfiddle.net/gaby/xb6smptx/2/

    InformationsquelleAutor Gabriele Petrioli
Schreibe einen Kommentar