使用嵌套的flexbox div的日历布局 - 容器不堆叠
mhe*_*all 5 html calendar css3 flexbox
我正在尝试使用flexbox创建日历标题,用于年,月,日的布局,但我无法实现预期的结果.
我究竟做错了什么？是我如何构建HTML或我在CSS中遗漏了什么？
预期结果与此类似:
div {
box-sizing: border-box;
}
.flex {
display: flex;
flex-flow: row nowrap;
}
.year,
.month,
.day {
border: 1px solid gray;
height: 20px;
}
.year {
background-color: red;
}
.month {
background-color: blue;
}
.day {
background-color: green;
width: 20px;
}<div class="flex">
<div class="year flex">2015
<div class="month flex">Jan
<div class="day">01</div>
<div class="day">02</div>
<div class="day">03</div>
<div class="day">04</div>
<div class="day">05</div>
<div class="day">06</div>
<div class="day">07</div>
<div class="day">08</div>
</div>
<div class="month flex">Feb
<div class="day">01</div>
<div class="day">02</div>
<div class="day">03</div>
<div class="day">04</div>
<div class="day">05</div>
<div class="day">06</div>
<div class="day">07</div>
<div class="day">08</div>
</div>
<div class="month flex">Mar
<div class="day">01</div>
<div class="day">02</div>
<div class="day">03</div>
<div class="day">04</div>
<div class="day">05</div>
<div class="day">06</div>
<div class="day">07</div>
<div class="day">08</div>
</div>
</div>
<div class="year flex">2016
<div class="month flex">Jan
<div class="day">01</div>
<div class="day">02</div>
<div class="day">03</div>
<div class="day">04</div>
<div class="day">05</div>
<div class="day">06</div>
<div class="day">07</div>
<div class="day">08</div>
</div>
<div class="month flex">Feb
<div class="day">01</div>
<div class="day">02</div>
<div class="day">03</div>
<div class="day">04</div>
<div class="day">05</div>
<div class="day">06</div>
<div class="day">07</div>
<div class="day">08</div>
</div>
<div class="month flex">Mar
<div class="day">01</div>
<div class="day">02</div>
<div class="day">03</div>
<div class="day">04</div>
<div class="day">05</div>
<div class="day">06</div>
<div class="day">07</div>
<div class="day">08</div>
</div>
</div>
</div>删除了 .flex 类，替换为 .eqWrap （个人偏好，因为我添加了 eqHW 以实现相等的高度和宽度），您的问题之一是由使用 flex-flow: row nowrap; 引起的。我看到的另一个问题是你没有将弹性框设置为相等的宽度和高度。我还摆脱了日间课程的宽度。我看到的 HTML 代码问题是，您没有将所有月份放在一起，然后将日期放在一起，然后将所有内容合并到一个弹性框 div 中，这也会导致所有内容都显示在一行上。
div {
box-sizing: border-box;
}
.eqWrap {
display: flex;
}
.year{
background: red;
}
.month {
background: blue;
}
.day {
background: green;
}
.month, .day, .year {
border: 1px solid gray;
text-align:center;
}
.equalHW {
height:20px;
flex: 1;
}
Run Code Online (Sandbox Code Playgroud)
<div class="equalHW year">2015</div>
<div class="eqWrap">
<div class="equalHW month">Jan</div>
<div class="equalHW month">Feb</div>
<div class="equalHW month">Mar</div>
</div>
<div class="eqWrap">
<div class="equalHW day">1</div>
<div class="equalHW day">2</div>
<div class="equalHW day">3</div>
<div class="equalHW day">4</div>
<div class="equalHW day">5</div>
<div class="equalHW day">6</div>
<div class="equalHW day">7</div>
<div class="equalHW day">8</div>
<div class="equalHW day">1</div>
<div class="equalHW day">2</div>
<div class="equalHW day">3</div>
<div class="equalHW day">4</div>
<div class="equalHW day">5</div>
<div class="equalHW day">6</div>
<div class="equalHW day">7</div>
<div class="equalHW day">8</div>
<div class="equalHW day">1</div>
<div class="equalHW day">2</div>
<div class="equalHW day">3</div>
<div class="equalHW day">4</div>
<div class="equalHW day">5</div>
<div class="equalHW day">6</div>
<div class="equalHW day">7</div>
<div class="equalHW day">8</div>
</div>
<div class="equalHW year">2016</div>
<div class="eqWrap">
<div class="equalHW month">Jan</div>
<div class="equalHW month">Feb</div>
<div class="equalHW month">Mar</div>
</div>
<div class="eqWrap">
<div class="equalHW day">1</div>
<div class="equalHW day">2</div>
<div class="equalHW day">3</div>
<div class="equalHW day">4</div>
<div class="equalHW day">5</div>
<div class="equalHW day">6</div>
<div class="equalHW day">7</div>
<div class="equalHW day">8</div>
<div class="equalHW day">1</div>
<div class="equalHW day">2</div>
<div class="equalHW day">3</div>
<div class="equalHW day">4</div>
<div class="equalHW day">5</div>
<div class="equalHW day">6</div>
<div class="equalHW day">7</div>
<div class="equalHW day">8</div>
<div class="equalHW day">1</div>
<div class="equalHW day">2</div>
<div class="equalHW day">3</div>
<div class="equalHW day">4</div>
<div class="equalHW day">5</div>
<div class="equalHW day">6</div>
<div class="equalHW day">7</div>
<div class="equalHW day">8</div>
</div>
Run Code Online (Sandbox Code Playgroud)
Run Code Online (Sandbox Code Playgroud)
| 归档时间： |
|
| 查看次数： |
773 次 |
| 最近记录： |