Html 如何在div元素中包含标题和滚动部分

您好，我正在创建一个代码，您可以在其中管理自动喷水灭火系统。我希望它有一个现代的外观和网页视觉吸引力，目前我有两个方面/列每列有框上。目前，这些框没有按照我的要求彼此对齐。我希望左侧底部的框比顶部的框低5像素，与写入框不一致。我还希望显示“运行历史记录”的框有一个滚动段。表示运行历史记录的部分和要修复的表的顶部。当表格元素在div内滚动时。完整代码在此代码笔上：

部分代码在这里是HTML

<div class="body">
  <div class="boxes">
    <div class="water box box-left">
      <h1>Water Saved</h1>
      <p>You Have Saved:<br><span class="huge">15</span><br> gallons of water</p>
    </div>
    <div class="water box box-right">
      <div class="fixed">
      <h1>Run History</h1>
      <table>
        <tr>
          <th>Date</th>
          <th>Schedule</th>
          <th>Run Factor</th>
        </tr>
        <tr>
          <td>April  22</td>
          <td>One</td>
          <td>0.8</td>

        <tr>
          <td>April  21</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  20</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  19</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  18</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  17</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  16</td>
          <td>One</td>
          <td>1.2</td>
        </tr>
        <tr>
          <td>April  15</td>
          <td>One</td>
          <td>1</td>
        </tr>
      </div>
    </table>
    </div>
  </div>













  <!-- column 2 -->
  <div class="boxes">
    <div class="water box box-left">
      <h1>Water Saved</h1>
      <p>You Have Saved:<br><span class="huge">15</span><br> gallons of water</p>
    </div>
    <div class="water box box-right">
      <div class="fixed">
      <h1>Run History</h1>
      <table>
        <tr>
          <th>Date</th>
          <th>Schedule</th>
          <th>Run Factor</th>
        </tr>
        <tr>
          <td>April  22</td>
          <td>One</td>
          <td>0.8</td>

        <tr>
          <td>April  21</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  20</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  19</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  18</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  17</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  16</td>
          <td>One</td>
          <td>1.2</td>
        </tr>
        <tr>
          <td>April  15</td>
          <td>One</td>
          <td>1</td>
        </tr>
      </div>
    </table>
    </div>
  </div>
</div>

---

总之，你想得到以下结果，对吗

• 列内容的垂直对齐，使其在彼此下方向上移动，而不与另一列中的任何内容对齐
• 在“运行历史记录”框中的表格上出现滚动溢出，滚动时标题是固定的

对齐

我认为你把列和行搞混了。行是水平的，列是垂直的。两个“节水”框与相邻的“运行历史”选项卡之间是否存在相关性？如果不是，我建议将“节水”框包装在一列中，将“运行历史”框包装在另一列中。这样，通过将它们组合在一起，您将获得所需的对齐方式

所以它会是这样的：

节约用水
您已保存：

十五

加仑水

节约用水
您已保存：

十五

加仑水

运行历史记录
...
运行历史记录
...

您需要一些CSS来将它们像列一样并排排列。我建议如下：

.box{
显示器：flex；
对正内容：空间均匀；
宽度：100%；
填充：0；
}
.栏目{
flex:0自动；
宽度：35%；/*以获得相同的原始宽度*/
}
.盒子{
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
边框：1px实心rgb（229229229）；
填充：1%；
边缘底部：5px；
边界半径：25px；
盒影：8px 8px 4px rgb（247247247）；
}

为了并排显示列，我使用了flexbox（

display:flex；

）。如果您不熟悉它，我建议您在学习CSS时研究一下它。它提供了一种非常好的元素排列方式

您还必须删除一些当前的样式才能使其正常工作。删除以下内容：

.box:：之后{
内容：“；
明确：两者皆有；
显示：表格；
}

我看到你以前用过它，使盒子和左右两侧的空间相同。但是由于我们使用flexbox，

使内容合理：空间均匀属性处理该问题

框滚动

为此，我们只需向已创建的
scroll
类添加一个与高度相关的属性。我们可以添加
height
或
max height
，这样我们就可以确保列表在开始滚动时有一个限制

我还建议将
overflow
属性更改为
overflow-y
，以确保我们只处理垂直滚动，而不是意外添加水平滚动

。滚动{
最大高度：200px；
溢出y：自动；
}

之后，我们可以将
表格
元素包装到新的
滚动
类中，以添加滚动：


运行历史记录
...

这是您的完整代码笔，其中包含上述更改：

我希望这能有所帮助。
谢谢，这正是我想要的。应该很容易在列右侧的顶部和底部框之间添加边距？是否可以用“运行历史记录”来固定表头（th），哦，如果查看器位于移动设备上，是否有办法只包含一列much@MasonHorder当然只需在
.box
类中添加一个垂直边距。为了使表头也得到修复，需要更多的CSS和对HTML的一些更改来修复。我已经更新了我列出的代码笔，使其也具有这种功能。如果你想进一步解释它是如何工作的，我建议你看一看，最后，如果你想让它全部显示在手机上的一列中，只需添加一个具有所需宽度的，然后将以下属性添加到
.box
类：
柔性方向：列
。这将在手机上的单个列中显示它们。
#blue{


color: rgb(38, 99, 242);
}

.huge{
  font-size:90px;
  font-weight: 900;
}

#name-link:hover{
  text-decoration: none;
}

.body {
  /* margin-left: 25%; */
  /* margin-right: 25%; */
}

.body{
  box-sizing: border-box;
}


.boxes::after {
  content: "";
  clear: both;
  display: table;
}

.boxes{
  width:100%;
}



.box{
  float: left;
}


.box{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid rgb(229, 229, 229);
  width: 35%;
  padding:1%;
  /* max-height: 300px;
  overflow: scroll; */
  margin-left:10%;
  border-radius: 25px;
  box-shadow: 8px 8px 4px rgb(247, 247, 247);
}
.box:hover{
  transition: 0.2s;
  box-shadow: 10px 10px 7px rgb(230, 230, 230);
  cursor:pointer;
}

.underline{
  text-decoration: underline;
}

td, th {
  /* border: 1px solid #dddddd; */
  text-align: left;
  padding: 8px;
}

th{
  border-bottom: 1px solid rgb(229, 229, 229);
}

table {
  width: 100%;
  text-align: right;
}

.scroll{
  /* height:200px; */
  overflow: scroll;
}

/* .fixed{
  position: fixed;
} */