html divとの位置合わせの問題が重なり合っている

Question

私はかなり単純なことをやろうとしているhtmlコードでいくつかの問題を抱えています。実際には私はこれを今のところ最も単純な形に壊しました。だから私はお互いの上に3つのブロックを持っています。一番上の最初のブロックには、その中に3つのサブボックスが水平にあります。このブロックの高さはテキストが収まるので250ピクセルに固定しました。しかし、私の2番目のブロック（センター）はトップdivと重なっています。トップdivの後にセンターdivを開始するように指定するにはどうすればよいですか？ Top divの下に数ピクセルを表示します。

<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

ここに必要なものがあります。スタイルシートを作成して、スタイルをもっと良くすることができます。

ワーキングフィドル：https://jsfiddle.net/v9jgj7n3/

私はあなたのレイアウトを作成しました。これが私があなたが必要とするものを理解する方法です。

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

編集して所望の値に幅と高さ。これは動作する方法です

また、Topの子要素を閉じなかったことがわかりました。あなたは常にDIVを閉じなければならないので、HTMLコードはうまく動作します。それはあなたのコードを壊す。

希望します。乾杯！フィリピンのおはよう。