css - 第 n 列的换行行仅对日历或图片库使用 CSS

Question

问题

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

这是我想要用 CSS 实现的日历外观:

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

我的代码

版本 1

我的日历版本有效，但它使用固定的 <br> HTML 中的标记，这不允许轻松更改 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 来完成相同的任务，但到目前为止，还没有成功。以下是这次尝试的一些挑战:

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

1. 即使我设置了 display: table-cell 集，跨度也会内联显示。
2. 这里我们使用 span.cell:nth-child(8n):after按照这篇文章插入一个空行(但它不起作用):Line break (like <br>) using only css
3. 尝试过 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 -->

我试过但没用

1. 我在搜索中找到了以下链接，但没有一个提供有效的解决方案(尽管其中许多声称或接近):

   • > Line break (like <br>) using only css
   • > Adding a line break between two inline elements | CoderWall
   • > Injecting a Line Break | CSS-Tricks
   • > An inline-block intervention | Really Good Work!
   • > Should You Use Inline-Blocks As A Substitute For Floats? | Vanseo Design
   • > How to break an inline-block row | CSS Creator
   • > How To Make a Calendar using CSS | W3Schools

我的问题

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

Answer 1

正如 jameswassinger 所说，它可以用 float 来完成。

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

请记住

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 -->