Wie man Divs korrekt positioniert

Ich habe 3 Divs, Haupt, rechts und links. Das Hauptdiv enthält das rechte und linke div und ich möchte das rechte und linke div Seite an Seite ausrichten. Ich habe hier einige Beiträge gelesen, konnte aber nicht die gewünschten Ergebnisse erzielen.Wie man Divs korrekt positioniert

https://jsbin.com/lagikaxiwe/edit?html,css,output

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div#main-content { 
 
    background-color: bisque; 
 
    height: 100%; 
 
} 
 

 
div#right-content { 
 
    position: relative; 
 
    width: 35%; 
 
    height: 100%; 
 
    background-color: #ffffff; 
 
} 
 

 
div#left-content { 
 
    position: absolute; 
 
    width: calc(100% - 35%); 
 
    height: 100%; 
 
    margin: 0px 0px 0px 666px; 
 
    background-color: #00aeef; 
 
}

<div id="main-content"> 
 
    <div id="right-content"> 
 
    </div> 
 
    <div id="left-content"> 
 
    </div> 
 
</div>

Quelle

2017-09-15 Maddy

Absolute Positionierung ist eine ** sehr ** schlechte Methode zum Auslegen von Webseiten. Es ist extrem unflexibel und es gibt viel bessere und reaktionsfähigere Optionen. Check out [** LearnLayout.com **] (http://learnlayout.com/) –

@Paulie_D, danke für den Link. Ich lerne immer noch CSS und halte mich an alte Ideen. – Maddy

Ich habe den Code nicht in das Snippet geschrieben, weil es nicht die ganze Sache zeigt. – Maddy

Die einfachste Methode heutzutage display: flex auf dem Behälter zu verwenden. Werfen Sie einen Blick auf die Einstellungen in meinem Schnipsel - ich viele der anderen Einstellungen gelöscht, die nicht notwendig sind ...

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
div#main-content { 
 
    background-color: bisque; 
 
    height: 100%; 
 
    display: flex; 
 
} 
 

 
div#right-content { 
 
    width: 35%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
div#left-content { 
 
    width: 65%; 
 
    height: 100%; 
 
    background-color: #00aeef; 
 
}

<div id="main-content"> 
 
    <div id="right-content"> 
 
    </div> 
 
    <div id="left-content"> 
 
    </div> 
 
</div>

Quelle

2017-09-15 16:07:51 Johannes

ist Flex kompatibel mit IE? Ich muss sicherstellen, dass es über alle Browser funktioniert. – Maddy

hängt von der Version ab - ab 11, ja. siehe http://www.caniuse.com/#search=flexbox – Johannes

html, 
body { 
    margin: 0; 
    padding: 0; 
} 

div#main-content { 
     background-color: bisque; 
     height: 100%; 
     width: 100%; 
} 

div#right-content { 
    float: left; 
    width: 35%; 
    height: 100%; 
    background-color: #ffffff; 
} 

div#left-content { 
    width: calc(100% - 35%); 
    height: 100%; 
    background-color: #00aeef; 
    float: left; 
}

Quelle

2017-09-15 16:01:07 Sayan

ich persönlich display:inline-block verwenden würde die linke auszurichten und rechts divs Seite an Seite und fügen Sie die erforderlichen Breiten hinzu, um bis zu 100% der übergeordneten Breite hinzuzufügen. Stellen Sie sicher, dass Sie font-size:0 auf dem übergeordneten Element verwenden, um den Leerraum zwischen den linken und rechten Divs zu eliminieren, damit sie richtig nebeneinander sitzen.

Achten Sie darauf, die Schriftgrößen Ihrem linken und rechten Inhalt zuzuordnen, damit Ihr Inhalt tatsächlich angezeigt wird!

Diese Methode ist weitgehend abwärtskompatibel mit allen Browsern.

div#main-content{ 
    font-size:0; 
} 

div#left-content{ 
    display:inline-block; 
    vertical-align:top; 
    width:65%; 
} 

div#right-content{ 
    display:inline-block; 
    vertical-align:top; 
    width:35%; 
}

Quelle

2017-09-15 16:08:59

Wie man Divs korrekt positioniert

Antwort

Verwandte Themen