在第 n 列使用 CSS 的换行符仅适用于日历或图片库

Question

问题

我正在尝试使用 HTML/CSS 设计一个基本的日历布局。另一个应用程序是图片库。关键是，我希望能够仅使用 CSS 在列中设置行 "width"，但它不起作用。

这是我想要通过 CSS:

实现的日历外观

注意：我发现最有前途的解决方法是将内联块无序列表包装在容器 div 中，并设置 div 的宽度，以便它给你所需的行长度。然而，这个对于我的目的来说不是一个充分的解决方案。它没有解决插入换行符以手动拆分行的问题。

我的代码

版本 1

我的日历版本有效，但它在 HTML 中使用固定的 <br> 标签，这不允许轻松更改 CSS 中的数字来更改行宽。

span.cell {
    display: table-cell;
    border-collapse: collapse;
    height: 2.2em;
    border: solid black 1px;
    width: 30px;
}

span.cell:nth-child(8n+7) {
    background-color: yellowgreen;
}

br {
    content: "";
    margin: 0;
}

<span class='cell'>1 </span>
<span class='cell'>2 </span>
<span class='cell'>3 </span>
<span class='cell'>4 </span>
<span class='cell'>5 </span>
<span class='cell'>6 </span>
<span class='cell'>7 </span>
<br>
<span class='cell'>8 </span>
<span class='cell'>9 </span>
<span class='cell'>10 </span>
<span class='cell'>11 </span>
<span class='cell'>12 </span>
<span class='cell'>13 </span>
<span class='cell'>14 </span>
<br>
<span class='cell'>15 </span>
<span class='cell'>16 </span>
<span class='cell'>17 </span>
<span class='cell'>18 </span>
<span class='cell'>19 </span>
<span class='cell'>20 </span>
<span class='cell'>21 </span>
<br>
<span class='cell'>22 </span>
<span class='cell'>23 </span>
<span class='cell'>24 </span>
<span class='cell'>25 </span>
<span class='cell'>26 </span>
<span class='cell'>27 </span>
<span class='cell'>28 </span>
<br>
<span class='cell'>29 </span>
<span class='cell'>30 </span>
<span class='cell'>31 </span>

版本 2

版本 2 尝试使用纯 CSS 来完成同样的事情，但到目前为止，还没有成功。以下是这次尝试的一些挑战：

这是我在这个版本中得到的错误结果：

跨度内联显示，即使我有显示：table-单元格集。
这里我们使用 span.cell:nth-child(8n):after 插入一个空行，按照这个 post （但它不起作用）：Line break (like <br>) using only css
试过Chrome、Firefox、IE，都没有用。

span.cell {
    display: table-cell;
    border-collapse: collapse;
    height: 2.2em;
    border: solid black 1px;
}

span.cell:nth-child(7n) {
    background-color: yellowgreen;
}

span.cell:nth-child(8n):after {
    content: "\a";
    white-space: pre;
}   

br {
    content: "";
    margin: 0;
}

<div id="cal1">

<span class='cell' style='width:30px'>1 </span>
<span class='cell' style='width:30px'>2 </span>
<span class='cell' style='width:30px'>3 </span>
<span class='cell' style='width:30px'>4 </span>
<span class='cell' style='width:30px'>5 </span>
<span class='cell' style='width:30px'>6 </span>
<span class='cell' style='width:30px'>7 </span>
<span class='cell' style='width:30px'>8 </span>
<span class='cell' style='width:30px'>9 </span>
<span class='cell' style='width:30px'>10 </span>
<span class='cell' style='width:30px'>11 </span>
<span class='cell' style='width:30px'>12 </span>
<span class='cell' style='width:30px'>13 </span>
<span class='cell' style='width:30px'>14 </span>
<span class='cell' style='width:30px'>15 </span>
<span class='cell' style='width:30px'>16 </span>
<span class='cell' style='width:30px'>17 </span>
<span class='cell' style='width:30px'>18 </span>
<span class='cell' style='width:30px'>19 </span>
<span class='cell' style='width:30px'>20 </span>
<span class='cell' style='width:30px'>21 </span>
<span class='cell' style='width:30px'>22 </span>
<span class='cell' style='width:30px'>23 </span>
<span class='cell' style='width:30px'>24 </span>
<span class='cell' style='width:30px'>25 </span>
<span class='cell' style='width:30px'>26 </span>
<span class='cell' style='width:30px'>27 </span>
<span class='cell' style='width:30px'>28 </span>
<span class='cell' style='width:30px'>29 </span>
<span class='cell' style='width:30px'>30 </span>
<span class='cell' style='width:30px'>31 </span>

</div><!-- END #cal1 div -->

我试过但没有用

我在搜索中找到了以下链接，但其中 none 提供了可行的解决方案（尽管其中许多据称或接近）：

我的问题

我正在尝试做的事情是否可行（在不使用容器 div 的情况下拆分一行 span 或一个无序列表，或者仅使用 CSS 添加额外的标记）？如果不是，为什么？如果可以，怎么做？

Answer 1

我相信您可以通过将单元格元素向左浮动来获得您想要的外观和效果。要通过 CSS 实现 "line break" 使用 clear 属性 clear: both;

这是一个 jsFiddle 示例。

让我知道这个答案是否有帮助。

.day {
  float: left;
  display: table-cell;
  border-collapse: collapse;
  height: 2.2em;
  border: solid black 1px;
  width: 30px;
}

.colored {
  background: #8AC627;
}
.clear {
  clear: both;
}

<span class="day">1</span>
<span class="day">2</span>
<span class="day">3</span>
<span class="day">4</span>
<span class="day">5</span>
<span class="day">6</span>
<span class="day colored">7</span>
<div class="clear"></div>
<span class="day">8</span>
<span class="day">9</span>
<span class="day">10</span>
<span class="day">11</span>
<span class="day">12</span>
<span class="day">13</span>
<span class="day colored">14</span>
<div class="clear"></div>
<span class="day">15</span>
<span class="day">16</span>
<span class="day">17</span>
<span class="day">18</span>
<span class="day">19</span>
<span class="day">20</span>
<span class="day colored">21</span>
<div class="clear"></div>
<span class="day">22</span>
<span class="day">23</span>
<span class="day">24</span>
<span class="day">25</span>
<span class="day">26</span>
<span class="day">27</span>
<span class="day colored">28</span>
<div class="clear"></div>
<span class="day">29</span>
<span class="day">30</span>
<span class="day">31</span>

Answer 2

正如 jameswassinger 发布的那样，它可以用浮动来完成。

因为你想通过 CSS 注入它，这里有一个这样做的片段

记住

clear left: Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

w3c reference

span.cell {
  float: left;
    height: 2.2em;
    border: solid black 1px;
}

span.cell:nth-child(7n) {
    background-color: yellowgreen;
}
span.cell:nth-child(7n+1) {
  clear: left;
}

<div id="cal1">

<span class='cell' style='width:30px'>1 </span>
<span class='cell' style='width:30px'>2 </span>
<span class='cell' style='width:30px'>3 </span>
<span class='cell' style='width:30px'>4 </span>
<span class='cell' style='width:30px'>5 </span>
<span class='cell' style='width:30px'>6 </span>
<span class='cell' style='width:30px'>7 </span>
<span class='cell' style='width:30px'>8 </span>
<span class='cell' style='width:30px'>9 </span>
<span class='cell' style='width:30px'>10 </span>
<span class='cell' style='width:30px'>11 </span>
<span class='cell' style='width:30px'>12 </span>
<span class='cell' style='width:30px'>13 </span>
<span class='cell' style='width:30px'>14 </span>
<span class='cell' style='width:30px'>15 </span>
<span class='cell' style='width:30px'>16 </span>
<span class='cell' style='width:30px'>17 </span>
<span class='cell' style='width:30px'>18 </span>
<span class='cell' style='width:30px'>19 </span>
<span class='cell' style='width:30px'>20 </span>
<span class='cell' style='width:30px'>21 </span>
<span class='cell' style='width:30px'>22 </span>
<span class='cell' style='width:30px'>23 </span>
<span class='cell' style='width:30px'>24 </span>
<span class='cell' style='width:30px'>25 </span>
<span class='cell' style='width:30px'>26 </span>
<span class='cell' style='width:30px'>27 </span>
<span class='cell' style='width:30px'>28 </span>
<span class='cell' style='width:30px'>29 </span>
<span class='cell' style='width:30px'>30 </span>
<span class='cell' style='width:30px'>31 </span>

</div><!-- END #cal1 div -->

在第 n 列使用 CSS 的换行符仅适用于日历或图片库

Line break row at nth column using CSS only for calendar or image gallery

css

calendar

row

calculated-columns

tablecell

问题

我的代码

版本 1

版本 2

我试过但没有用

我的问题