Warum werden meine Divs nicht alle horizontal ausgerichtet?

Question

Die ersten beiden sind perfekt ausgerichtet, aber die dritte nicht. Kann mir hier jemand sagen, was ich falsch mache? Ich war letzte Nacht stundenlang hier festgefahren, und heute morgen konnte ich, indem ich mir ähnliche Fragen anschaute, die ersten beiden Divs in die Flucht bringen, aber die dritte wird nicht egal sein. Es gibt ein ganz anderes div darunter, dass es weitergeht, anstatt nach oben zu gehen, um sich mit den anderen beiden auszurichten.

HTML & CSS

.framebox:after { 
 
    content: "", ; 
 
    clear: both; 
 
    display: table; 
 
} 
 
.frame1 { 
 
    float: left; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: white; 
 
    margin-left: 40px; 
 
    margin-right: 5px; 
 
} 
 
.frame2 { 
 
    margin: 0 auto; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: white; 
 
} 
 
.frame3 { 
 
    width: 30%; 
 
    height: 300px; 
 
    background-color: white; 
 
    margin-left: 5px; 
 
    margin-right: 40px; 
 
    float: right; 
 
}

<div class="framebox"> 
 
    <div class="frame1"> 
 
    <h2> dfgdfg</h2> 
 
    </div> 
 
    <div class="frame2"> 
 
    <h2> dfgdfg </h2> 
 

 
    </div> 
 
    <div class="frame3"> 
 
    <h2> dfgdfg </h2> 
 
    </div> 
 
</div>

Answer 1

Erste. Stellen Sie alle so ein, dass sie nach links schweben, so dass sie versuchen, nach links zu packen, bis sie die Seitenbreite füllen.

Wenn Sie einige der Breiten prozentual und andere in absoluten Zahlen einstellen, funktioniert Ihr Design nicht für alle Bildschirmgrößen. Du wirst viel Mathe machen müssen. Ich schlage vor, dass Sie alle Breiten prozentual verwenden, damit sie sich auf allen Bildschirmen verhalten.

In Ihrem Fall würden sie nur in Bildschirmen nach oben ausgerichtet, wo die Breite aller Elemente zusammen nicht größer als die Breite des Bildschirms ist.

Ich änderte die Hintergrundfarben, damit wir besser sehen konnten.

obs: Wenn Sie die minimale Bildschirmgröße kennen, die funktioniert, können Sie absolute Zahlen verwenden. Sie müssen die Divs mit ihren Rändern auf der kleinsten betrachteten Bildschirmgröße anpassen.

.framebox:after { 
 
    content: "", ; 
 
    clear: both; 
 
    display: table; 
 
} 
 
.frame1 { 
 
    background-color: yellow; 
 
    float: left; 
 
    width: 33%; 
 
    height: 300px; 
 
// margin-left: 40px; 
 
// margin-right: 5px; 
 
} 
 
.frame2 { 
 
    background-color: blue; 
 
    float: left; 
 
    margin: 0 auto; 
 
    width: 33%; 
 
    height: 300px; 
 
} 
 
.frame3 { 
 
    background-color: green; 
 
    width: 33%; 
 
    height: 300px; 
 
// margin-left: 5px; 
 
// margin-right: 40px; 
 
    float: left; 
 
}

<div class="framebox"> 
 
    <div class="frame1"> 
 
    <h2> dfgdfg</h2> 
 
    </div> 
 
    <div class="frame2"> 
 
    <h2> dfgdfg </h2> 
 

 
    </div> 
 
    <div class="frame3"> 
 
    <h2> dfgdfg </h2> 
 
    </div> 
 
</div>