Question

嗨，我正在创建一个代码，您可以在其中管理喷水灭火系统。我希望它具有现代外观，并且页面在视觉上具有吸引力，目前我有两个侧面/列，每列上都有框。目前，这些框无法按照我的意愿对齐。我会将左侧的底框比顶部的底框低5 px，而不与写入的底框一致。我还希望显示“运行历史记录”的框具有滚动部分。显示运行历史记录的部分以及要修复的表格顶部。当表格元素在div中滚动时。完整的代码在此代码笔上：https://codepen.io/masonhorder/pen/gyQmBG

部分代码在这里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

#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;
} */

Answer 1

因此，总结一下，您需要以下内容，对吗？

垂直对齐列内容，使其上下移动并且不与相对列中的任何内容对齐
“运行历史记录”框中的表上滚动溢出，滚动时标题已固定。

对齐方式

我认为您是在将列与行混淆。行是水平的，列是垂直的。两个“节水”框与相邻的“运行历史记录”选项卡之间是否有任何关联？如果没有，建议将“节水”框包装在一个栏中，将“运行历史记录”框包装在另一栏中。这样，通过将它们分组在一起，您将获得所需的对齐方式。

所以它就像：

<div class="boxes">

    <div class="column column-left">
        <div class="water box">
            <h1>Water Saved</h1>
            <p>You Have Saved:
                <br><span class="huge">15</span>
                <br> gallons of water
            </p>
        </div>
        <div class="water box">
            <h1>Water Saved</h1>
            <p>You Have Saved:
                <br><span class="huge">15</span>
                <br> gallons of water
            </p>
        </div>
    </div>

    <div class="column column-right">
        <div class="water box">
            <div class="fixed">
                <h1>Run History</h1>
                <table>
                    ...
                </table>
            </div>
        </div>
        <div class="water box">
            <div class="fixed">
                <h1>Run History</h1>
                <table>
                    ...
                </table>
            </div>
        </div>
    </div>

</div>

您需要一些CSS才能将它们像列一样并排布置。我建议以下内容：

.boxes {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    padding: 0;
}

.column {
    flex: 0 0 auto;
    width: 35%; /* To get the same orignal width */
}

.box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid rgb(229, 229, 229);
    padding:1%;
    margin-bottom: 5px;
    border-radius: 25px;
    box-shadow: 8px 8px 4px rgb(247, 247, 247);
}

为了并排显示列，我使用了flexbox（display: flex;）。如果您不熟悉它，我建议您在学习CSS时进行研究。它提供了一种非常好的元素排列方式。

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

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

我看到您之前使用过它，使框与左侧和右侧之间的空间相同。但是由于我们使用的是flexbox，因此justify-content: space-evenly;属性可以解决这个问题。

滚动框

为此，我们只需要向您已经创建的scroll类添加与高度相关的属性。我们可以添加height或max-height，因此请确保列表在开始滚动时有限制。

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

.scroll {
    max-height: 200px;
    overflow-y: auto;
}

此后，我们可以将table元素包装在新的scroll类中，以添加滚动：

<div class="water box">
    <h1>Run History</h1>
    <div class="scroll">
        <table>
            ...
        </table>
    </div>
</div>

这是您的完整密码笔，其中包含上述更改： https://codepen.io/Phoenix1355/full/PgxmaX

我希望这会有所帮助。

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

1 个答案: