Question

我在使用某些HTML代码时遇到了一些困难（我从来没有做过任何重要的html编程），我试图做一些相当简单的事情。实际上我现在把它分解成最简单的形式。所以我有三个块在彼此之上。最顶部的第一个块水平地有三个子框。我将这个块的高度固定为250px，因为我的文本适合它。但是我的第二个块（中心）与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

这就是你需要的。创建样式表，以便我们可以更好地设计样式。

工作小提琴：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代码将运行良好。它打破了你的代码。

希望它有所帮助。干杯!来自菲律宾的早安。

对齐问题与html div堆叠在一起

1 个答案: