html - html div 堆叠在一起的对齐问题

Question

我在尝试做一些相当简单的事情时遇到了一些 html 代码的困难(我从来没有做过任何重要的 html 编程)。实际上，我暂时将其分解为最简单的形式。所以我有三个 block 在彼此之上。最顶部的第一个 block 在其中水平放置了三个子框。我将这个 block 的高度固定为 250px，因为我的文本适合它。但是我的第二个 block (中心)与 Top div 重叠。如何指定中心 div 在 Top 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

这就是您所需要的。创建一个样式表，以便我们可以更好地设计它。

工作 fiddle :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 代码才能正常运行。它破坏了你的代码。

希望对您有所帮助。干杯!来自菲律宾的早上好。