时间戳

首页 > 解决方案 > 基于容器的具有特定宽度和高度的 div

javascript - 基于容器的具有特定宽度和高度的 div

问题描述

我有两个并排的日历，使用 css 网格一切看起来都很好。Awesome1 我现在的问题是，我想通过在 html 上复制/粘贴波纹管以某种方式复制每 31 次，并以某种方式使用 javascript 填充该区域，但每行只允许 7 个 div 和 5 行填充其容器的整个空间

有人可以建议我如何解决吗？我不想用网格来做，想要用 javascript 并基于它生成:) 7 x 5 框（宽度 x 高度）动态地为每个 blockCalendarBox 提供宽度和高度？

亲切的问候！

.dashboardContentInnerWrapper {
  height: 300px;
  background-color:red;
}

.grid-container {
    display: grid;
    height: 100%;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.2fr 1.8fr;
    grid-template-areas: "reportTitle reportTitle" "blockOne blockTwo";
}

.blockStyle {
    background-color: white;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
}

.blockTitleArea{
    width: 100%;
    height: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.reportTitle { 
    grid-area: reportTitle; 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.blockOne { 
    grid-area: blockOne; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.color1 {
    background-color: #333333;
    color: #ffffff;
}

.blockCalendarWrapper {
    position: relative;
    width: 100%;
    height: calc(100% - 25px);
}

.blockCalendarBox {
    position: relative;
    background-color: green;
    width:20px;  
    height:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
<div class="dashboardContentInnerWrapper">
            <div class="grid-container">
              <div class="reportTitle subtitle">Report / March 2020</div>
            
              <div class="blockOne blockStyle">
                <div class="blockTitleArea color1">FIRST CALENDAR</div>
                <div class="blockCalendarWrapper">
                    <div class="blockCalendarBox">1</div>
                </div>
              </div>
              
              <div class="blockTwo blockStyle">
                <div class="blockTitleArea color1">SECOND CALENDAR</div>
                <div class="blockCalendarWrapper">
                    <div class="blockCalendarBox">1</div>
                </div>
              </div>
              
            </div>
</div>

标签： javascripthtmlcss

解决方案

我不确定这是否能解决您的问题。

.blockCalendarWrapper {
    position: relative;
    width: 100%;
    height: calc(100% - 25px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

如果你想在每个盒子上使用 css。

.blockCalendarBox {
    position: relative;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    display: inline-flex;
    width: calc(100% / 7);
    height: calc(100% / 5);
    text-align: center;
}

如果你想使用 javascript 作为宽度和高度，你可以得到容器的 with 并将其除以 7 作为宽度。

我希望这能解决你的问题。

推荐阅读