Flexbox细胞上的圆形背景色
Flexbox细胞上的圆形背景色
提问于 2016-12-21 23:36:25
我是Flexbox的新手，我试图构建一个响应性的基于表格的日历，在特定的单元格上设置圆形背景色。我遇到的问题是，由于每个单元格的宽度都是动态的，在更宽(大多数)的屏幕上，背景是椭圆形，而不是圆圈。如何在不干扰当前布局或使用固定大小的情况下将它们设置为圆圈？
作为一项奖励，我还希望能够动态地将日期/年份与最左边的列对齐。
CSS：
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
background-color: grey;
}标记：
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>笔：http://codepen.io/ourcore/pen/rWbjYZ。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-21 23:43:58
添加了一个伪元素并给它添加了一些样式。
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
position: relative;
}
div.table-cell.event-on::before {
content: '';
width: 25px;
height: 25px;
background-color: grey;
position: absolute;
z-index: -9;
left: 10px;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
border-radius: 13px;
}<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41277963
复制
相似问题
圆形细胞参考
Flexbox网格:细胞不会生长
多细胞VBA中的圆形时间
jTable细胞背景色
重复细胞背景色
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
