Problema

Estoy tratando de diseñar un diseño de calendario básico usando HTML / CSS. Otra aplicación sería una galería de imágenes. El punto es que quiero poder establecer el "ancho" de la fila en columnas usando solo CSS, pero no funciona.

Este es el aspecto de calendario deseado que estoy tratando de lograr con CSS:

Desired "calendar" look

NOTA: La solución más prometedora que he encontrado es ajustar una lista desordenada de bloque en línea en un div contenedor y establecer el ancho del div para que le dé la longitud de fila deseada. Sin embargo, esto no es una solución suficiente para mis propósitos . No aborda insertar un salto de línea para dividir filas manualmente.

Mi código

Versión 1

Esta versión de mi calendario funciona, pero utiliza etiquetas fijas <br> en el HTML, lo que no permite cambiar fácilmente un número en el CSS para cambiar el ancho de fila.

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>

Versión 2

La versión 2 intenta lograr lo mismo usando CSS puro, pero hasta ahora no ha tenido éxito. Estos son algunos de los desafíos con este intento:

Aquí está el resultado incorrecto que obtengo con esta versión:

enter image description here

  1. Los tramos se muestran en línea a pesar de que tengo display: table-cell set.
  2. Aquí estamos usando span.cell:nth-child(8n):after para insertar una línea en blanco, según esta publicación (pero no funciona): Salto de línea (como
    ) usando solo css
  3. He probado Chrome, Firefox e IE, todo en vano.
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 -->

Lo que he intentado que no ha funcionado

  1. Encontré los siguientes enlaces en mi búsqueda, pero ninguno de ellos proporciona una solución de trabajo (aunque muchos de ellos supuestamente se acercaron):

Mis preguntas

  1. ¿Es posible lo que estoy tratando de hacer (dividir una fila de tramos o una lista desordenada sin usar un contenedor div, o agregar marcas adicionales, usando solo CSS)? Si no, ¿por qué? ¿Si es así, cómo?
0
Eric Hepperle - CodeSlayer2010 23 ene. 2017 a las 18:30

2 respuestas

La mejor respuesta

Como publicó jameswassinger, se puede hacer con carrozas.

Como desea que se inyecte a través de CSS, aquí hay un fragmento que lo hace

Recuérdalo

claro a la izquierda: requiere que el borde superior del cuadro esté debajo del borde exterior inferior de los cuadros flotantes a la izquierda que resultaron de elementos anteriores en el documento fuente.

referencia w3c

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 -->
1
vals 24 ene. 2017 a las 18:59

Creo que puede lograr el aspecto y los efectos deseados que desee flotando los elementos de celda a la izquierda. Para lograr el "salto de línea" mediante CSS, utilice el atributo clear clear: both;

Aquí hay un jsFiddle.

Avísame si esta respuesta te ayuda.

.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>
0
jameswassinger 24 ene. 2017 a las 05:34