Wie man div nicht überlappen und keine anderen div in übergeordneten div

Grundsätzlich habe ich damit mainDiv, das ist so ziemlich der Größe des Körpers.
In mainDiv es gibt 2 divs, die sollen neben einander sein, und Sie sind bis Größe ändern oder mobilen Gerät kommt. Problem ist, dass die zweite div-vollständig überlappt ersten.

Das gewünschte Ergebnis http://img17.imageshack.us/img17/473/yn9x.jpg

#mainDiv { 
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    position:relative;
    border: 1px solid red;
    float: left;
}

Rest des Codes: http://jsfiddle.net/fDELs/2/

  • Ich nicht nutzen konnten, Breite: [Wert]%, da brauche ich nicht beide divs immer angezeigt werden, während das Zoomen (und es noch startet, horizontal Essen erste div).
  • Ich kann nicht mit float: left oder float:right, denn wenn die Seite breiter dann den leeren Bereich zwischen 2 divs.

Nun habe ich js-workaround-Lösung, die prüft, der Breite und der position des ersten div und setzt die 'left' - Eigenschaft der zweite, aber ich würde lieben, es zu tun in CSS.

Ein Diagramm das gewünschte Ergebnis wäre hilfreich.
PS: ich brauche div2 relativ zum ersten div-nicht Körper auf der linken als div2 hat dort zu beginnen, wo div1 endet.

InformationsquelleAutor R.P | 2013-07-12

  1. 4

    Entfernen position: relative und top Werte von divs, und verwenden Sie margin-top statt.

    #mainDiv {
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    border: 1px solid red;
    float: left;
}

#first {
    margin-top: 170px;
}

#second {
    height: 400px;
    margin-top: 65px;
}

    Aktualisiert fiddle

    Geige gibt mir 2 divs die übereinander, und Sie haben ziemlich große, weiße Raum zwischen Ihnen. Auch margin-top ist auch eine schlechte Art und Weise zu starten, weil ich nicht will, Konstanten Folgen an mir herum. Das ist, warum ich bin versucht, dies mit CSS anstelle von javascript (Lesen Sie am Ende)

    InformationsquelleAutor Morpheus

  2. 1

    Versuchen Sie dies:

    http://jsfiddle.net/bSK6p/1/

    Verkleinern Sie das Fenster und sehen, was passiert.

    #mainDiv { 
    border: 1px solid black;
}

#mainDiv div {
    border: 1px solid red;
}

@media screen and (min-width:300px){
    #mainDiv { 
        height: 670px;
        display: flex;
        display: -webkit-flex;
    }

    #first {
        -webkit-flex: none;
        flex: none;
    }

    #second {
        -webkit-flex: 1;
        flex: 1;
        height: 400px;
    }
}
    In meinem code divs nicht überlappen.
    Ich kann bestätigen, dass dies funktioniert auf PC, aber nicht auf handheld-Geräten. Auf der Suche nach anderen Lösungen. Auch flex ist nicht unterstützt durch IE und safari. Sowieso +1 für die partielle Lösung.
    Tut dies Ihr problem lösen? http://jsfiddle.net/bSK6p/2/

    InformationsquelleAutor Mohammad Javad Naderi

  3. 0

    Entfernen position:relative aus #mainDiv div scheint, den trick zu tun 

    #mainDiv div {
    border: 1px solid red;
    float: left;
}

    http://jsfiddle.net/fDELs/4/

    divs übereinander auf meinem Bildschirm, ohne Größenänderung.
    Nur sah die Grafik: ich weiß nicht, ob das hilft, aber Sie könnte geben Sie eine max-width Wert auf die #zweite div jsfiddle.net/fDELs/8, auch wenn seine falsch, ich denke, Sie müssen irgendeine Art von width-Attribut in Ordnung, um es zu schweben, wie Sie wollen. (Ich habe auch die Vermutung, dass Sie Ihre waren nicht nicht gehen, füllen Sie den zweiten div mit einer großen ununterbrochenen Zeichenfolge, angesichts dieser Schmerzen zu style)

    InformationsquelleAutor Raymond

  4. 0

    So, die Antwort hat wenig zu tun mit dem, was Sie hier gepostet und kann nur ascertianed, indem wir Ihre komplette Turnschuh.

    Das problem ist, dass Sie die beiden inneren divs relativ positioniert an der gleichen Stelle. Die div voller Inhalte ist nur nach unten ein wenig, und das mit fast keinem Inhalt nach unten, in die Mitte.

    #first {
    top: 170px;
}

#second { 
    height: 400px;
    top: 65px;
}

    InformationsquelleAutor DrCord

Schreibe einen Kommentar