Alignment Probleme mit HTML divs übereinander gestapelt

Question

Ich habe einige Schwierigkeiten mit einigen HTML-Code (ich habe noch nie HTML-Programmierung von beliebiger Bedeutung getan), wo ich versuche, etwas ziemlich einfach zu tun. Eigentlich habe ich es vorerst auf die einfachste Form heruntergebrochen. Also habe ich drei Blöcke übereinander. Der erste Block ganz oben hat drei Unterfelder horizontal. Ich habe die Höhe dieses Blocks auf 250px festgelegt, da mein Text darin passt. Allerdings überschneidet sich mein zweiter Block (Center) mit dem Top div. Wie lege ich fest, dass der Center-Div nach dem Top-Div beginnt? Ich möchte, dass es ein paar Pixel unter dem oberen Teil anzeigt.

<div id="Report" style="height: auto"> 
    <div id="Top" style="width:inherit; height:250px"> 
     <div id="First" class="TopMostLeft" > 
     <span style="font-family:Calibri; font-size:small">Info</span> 
     <table style="width:100%" > ... </table> 
     <div id="Second" class="TopMostCenter"> 
     <span style="font-family:Calibri; font-size:small">Info2</span> 
     <div id="Third" class="TopMostRight"> 
     <div id="About" class="TopRightDiv"> 
     <table style="width:100%"> 
    </div> 
    <div id="Center" style="border:solid; border-width:2px; border-color:lightgray; padding:4px; margin:10px"> 
    <div id="Bottom" style="border-width:2px;border-width:2px; border-color:lightgray; padding:4px; margin:10px"> 

</div> 

Answer 1

Hier ist, was Sie brauchen. Erstellen Sie ein Stylesheet, damit wir es viel besser gestalten können.

Arbeits Fiddle: https://jsfiddle.net/v9jgj7n3/

habe ich Ihr Layout. So verstehe ich, was Sie brauchen.

HTML

<div id="Report"> 
    <div id="Top"> 
    <div id="First" class="TopMostLeft" ></div> 
    <div id="Second" class="TopMostCenter"></div> 
    <div id="Third" class="TopMostRight"></div> 
    </div> 
    <div id="Center"></div> 
    <div id="Bottom"></div> 
</div> 

CSS

#Top { 
    width: 100%; 
    display: flex; 
    height: 250px; 
} 

#Top #First { 
    width: 10%; 
    background: red; 
} 

#Top #Second { 
    width: 40%; 
    background: blue; 
} 

#Top #Third { 
    width: 50%; 
    background: yellow; 
} 

#Center { 
    height: 200px; 
    width: 100%; 
    background: gray; 
} 

#Bottom { 
    height: 80px; 
    width: 100%; 
    background: black; 
} 

Bearbeiten Sie die Breite und Höhe auf den gewünschten Wert. So funktioniert es

Auch merke ich, dass Sie das Kind-Element von Top nicht geschlossen haben. Sie müssen DIV immer schließen, damit der HTML-Code gut läuft. Es bricht deinen Code.

Ich hoffe, es hilft. Prost! Guten Morgen von den Philippinen.