Wie verhindere ich, dass diese divs nicht überlagern?

Ich habe drei divs, die in einem content-div.

Container-Breite 70%.
Innerhalb dieser ich habe
-Links, Breite 20%.
-Inhalt, Breite 60%.
-Right, width 20%.

Ich würde wie container nehmen bis zu 70% der Seite die Breite, und die inneren (Links, Inhalt, rechts) um bis 20%, 60% und 20% der div-container.

Ich habe versucht, andere Fragen hier, ich habe versucht zu Google, aber kann nicht scheinen, um herauszufinden, die richtige Antwort. Bitte helfen Sie mir zu verhindern, dass Sie überlappen.

Wie verhindere ich, dass diese divs nicht überlagern?

Aber wenn ich die Größe des browser, die divs überlappen. Wie diese:

Wie verhindere ich, dass diese divs nicht überlagern?

Hier der relevante CSS-code:

#container{
    width: 70%;
}
#left {
    float: left;
    width: 20%;
    min-width: 200px;
}
#content {
    float: left;
    width: 60%;
    min-width: 600px;
}
#right {
    float: right;
    width: 20%;
    min-width: 200px;
}
fügen Sie die html-als auch
nach erreichen der min-width, können Sie nicht schrumpfen alle weiter, die Ursachen überlappen. nur Weg mit der Verwendung von min-width verhindert, dass die Benutzer, um die Größe nach einer gewissen 🙂
erstellen Sie eine Geige plz

InformationsquelleAutor Josh | 2012-06-12

  1. 5

    Entfernen Sie einfach die min-width von CSS! Und geben min-width auf den container mit margin: auto zu machen-center.

    Versuchen, diese CSS:

    #container{
    width: 70%;
    min-width: 1000px;
    margin: auto;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

    Check-out fiddle hier: http://jsfiddle.net/UaqU7/2/

    InformationsquelleAutor Praveen Kumar Purushothaman

  2. 3

    Nehmen Sie die min-width CSS.

    Sobald die Fensterbreite wird unter einer bestimmten Größe, diese Elemente haben keine Wahl aber, sich zu überschneiden. Lassen Sie uns sagen, dass Ihre Fenster 1000px; dann wird der container in 700px. Aber mit dem min-breiten der divs im container sind bereits bei 1000px, überquellende container.

    M, Hier ist Ihre Antwort..

    InformationsquelleAutor McGarnagle

  3. 2

    Anstatt min-width von untergeordneten DIV ' s können Sie es geben, um #container. Schreiben wie dieses:

    #container{
    width: 70%;
    min-width:1000px;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

    Überprüfen Sie diese http://jsfiddle.net/yLVsb/

    InformationsquelleAutor sandeep

  4. 1

    Müssen Sie nehmen Sie die min-width aus deinem CSS.

    Wenn die Seite, die Größe kleiner die min-width hält es schrumpfen nicht weiter. So verursacht das überlappen.

    InformationsquelleAutor Undefined

  5. 1

    Hier gehen Sie, wenn Sie möchten, eine min-width, legen Sie es auf den Behälter

    http://jsfiddle.net/VBSYu/1/

    #container{
    width: 70%;
    min-width: 1000px;
}
#left {
     float: left;
     width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}​

    InformationsquelleAutor Chris James Champeau

  6. 1

    Hier ist die Geige seine Arbeitsmethoden in Ordnung http://jsfiddle.net/r42hH/2/

    InformationsquelleAutor SVS

Schreibe einen Kommentar