>

안녕하세요. 스프링클러 시스템을 관리 할 수있는 코드를 만들고 있습니다. 나는 현대적인 외관을 원하고 시각적으로 호소력있는 페이지를 원합니다. 각 칼럼마다 상자가있는 양면/열이 있습니다. 현재 상자는 내가 원하는 방식으로 서로 정렬되지 않습니다. 왼쪽의 아래쪽 상자는 쓰기의 상자와 일치하지 않고 위쪽의 상자 아래 5px 아래에 있습니다. 또한 "Run History"라는 상자에 스크롤 세그먼트가 있어야합니다. 실행 기록이라고 표시되는 부분과 고정 할 테이블의 맨 위입니다. 테이블 요소가 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;
} */

  • 답변 # 1

    그냥 요약하면 다음을 원하십니까?

    열 내용이 서로 아래로 이동하고 반대 열의 내용과 정렬되지 않도록 열 내용의 수직 정렬

    스크롤 할 때 헤더가 고정 된 상태로 "실행 기록"상자의 테이블에서 오버 플로우가 스크롤됩니다.

    정렬

    열이 행과 혼동되고 있다고 생각합니다. 행은 가로이고 열은 세로입니다. 두 "Water Saved"상자와 인접한 "Run History"탭 사이에 상관 관계가 있습니까? 그렇지 않다면 "물 절약"상자를 한 열에 포장하고 "실행 기록"상자를 다른 열에 포장하는 것이 좋습니다. 그렇게하면 원하는 그룹을 모아서 원하는 정렬을 얻을 수 있습니다.

    그래서 다음과 같습니다 :

    <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
    
    

    다음은 위에서 언급 한 변경 사항이 포함 된 전체 코드 펜입니다. https://codepen.io/Phoenix1355/full/PgxmaX

    이것이 약간 도움이되기를 바랍니다.

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

관련 자료

  • 이전 python - 웹 소켓을 열 때 토네이도 403 GET 경고
  • 다음 javascript - 배열 내에서 수정 된 객체 또는 집계를 구별