Aligment von divs

Question

Haben Sie ein paar Fragen:

1. Wie kann ich tun, um meine Anfrage div und meine Sprachen Div rechts nach unten mit der roten Linie unabhängig von der Größe der divs über ihnen zu haben.

2. Wie kann ich die Divisions "Name" und "Bewertung" vertikal in der Mitte des Bildes ausrichten?

Hier ist mein Code, JSFiddle (https://jsfiddle.net/samuvk/jejjzjjq/1/) und das Ergebnis

Das ist mein gewünschtes Ergebnis:

ich wirklich jede mögliche Hilfe schätzen würde.

#menucontainer { 
     border: 1px red solid; 
     overflow: auto; 
    } 
    .middledividermenu { 
     width: 39%; 
     float: left; 
     border: 1px green solid; 
     overflow: auto; 
    } 
    .pictureleft { 
     padding: 0.5em 0.5em 0.5em 0.5em; 
     width: 19%; 
     float: left; 
     border: 1px green solid; 
     overflow: auto; 
    } 
    .rightdivider { 

    width: 40%; 
     float: left; 
     border: 1px green solid; 
     overflow: auto; 
    } 
    .namemiddledivider { 
     width: 70%; 
     float: left; 
     border: 1px blue solid; 
     font-family: 'Roboto', sans-serif; 
     font-weight: 900; 
     font-size: 1.8em; 
    } 
    .description { 
     width: 99%;  
     float: left; 
     border: 1px blue solid; 
     font-family: 'Roboto', sans-serif; 
     font-size: 0.9em; 
     color:grey; 
    } 

    .request { 
     width: 99%; 
     float: left; 
     border: 1px blue solid; 
     text-align: center; 
    } 


.littlepicture { 
     width: 15%; 
     float: left; 
     border: 1px blue solid; 
} 

.languagecallout { 
     padding: 0em 0.5em 0em 0.5em; 
     width: 10%; 
     float: left; 
     border: 1px blue solid; 
} 

.name { 
width: 20%; 
float: left; 
border:1px solid blue; 
vertical-align: middle; 
} 

.rating { 
width: 57%; 
float: left; 
border:1px solid blue; 
height:50%; 
} 

.personrating { 
width: 99%; 
float: left; 
border:1px solid yellow; 
vertical-align: middle; 
} 

.languages { 
width: 99%; 
float: left; 
border:1px solid blue; 
} 

Answer 1

ich Ihre Geige nehmen es https://jsfiddle.net/jejjzjjq/5/ bearbeitet

Verwenden position:relative und position:absolute

Auch wenn Ihre Struktur ein bisschen chaotisch ist, ich habe keine Zeit zu ändern, ich nur ein paar Sachen hinzugefügt. Sie müssen Ihren Code wirklich vollständig überprüfen!

Answer 2

Hilft das? Es zeigt die Wirkung der Leerzeichen zwischen den oberen Divs und dem unteren Div in einem Container.

Andere Anmerkungen: Ich glaube, dass der reguläre Fluss von Inhalten von oben nach unten geht und wenn Sie ein bestimmtes Stück Inhalt auf den Boden legen oder aus dem normalen Fluss entfernen möchten, können Sie absolute Position verwenden.

vh wird in meinem Code verwendet, um die Höhe zu erhalten, damit es gut in den Fenster/View-Port passt. Sie könnten die Höhe zu Pixeln oder was auch immer machen.

*{ 
 
    box-sizing:border-box; 
 
} 
 
.container{ 
 
    height: 100vh; 
 
    border-bottom: 3px red solid; 
 
    position: relative; 
 
} 
 
.name, .rating, .language, .request{ 
 
    width: 45%; 
 
    border:1px solid blue; 
 
    height: 20vh; 
 
} 
 
.name, .request{ 
 
    float: left; 
 
} 
 
.rating, .language{ 
 
    float: right; 
 
} 
 
.bottom{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="name">Name</div> 
 
    <div class="rating">Rating</div> 
 
    <div class="bottom"> 
 
    <div class="request">Request</div> 
 
    <div class="language">Language</div> 
 
    </div> 
 

 
</div>