Problèmes d'alignement avec les divs html empilés les uns sur les autres

Question

J'ai quelques difficultés avec du code html (je n'ai jamais fait de programmation html d'importance) où j'essaye de faire quelque chose d'assez simple. En fait, je l'ai cassé à la forme la plus simple pour l'instant. J'ai donc trois blocs les uns sur les autres. Le premier bloc tout en haut a trois sous-boîtes à l'intérieur horizontalement. J'ai fixé la hauteur de ce bloc à 250px puisque mon texte s'y adapte. Cependant, mon deuxième bloc (Centre) chevauche le Top div. Comment puis-je spécifier que le div central commence après le div diviseur? Je veux qu'il affiche quelques pixels en dessous de la div Top.

<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

Voici ce dont vous avez besoin. Créez une feuille de style afin de pouvoir la styliser beaucoup mieux.

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

J'ai créé votre mise en page. C'est comme ça que je comprends ce dont tu as besoin.

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; 
} 

Modifier la largeur et la hauteur à votre valeur souhaitée. Voici comment cela fonctionnera

En outre, je remarque que vous n'avez pas fermé l'élément enfant de Top. Vous devez toujours fermer DIV, afin que le code HTML fonctionne bien. Il casse votre code.

Espérons que ça aide. À votre santé! Bonjour des Philippines.