0
206
ViewsCSS3: crecer div de izquierda a derecha mientras se conserva la posición original
Estoy intentando crear un calendario usando HTML, CSS y JavaScript. Este calendario está diseñado para mostrar eventos próximos/pasados, y estoy luchando para que mis bloques de eventos llenen el resto de los días del calendario de izquierda a derecha. Puede ver un ejemplo del calendario actual a continuación.
Aquí hay un ejemplo de cómo se estructuran las celdas de mi tabla dentro de mi proyecto:
.cell-container{ display: flex; justify-content: center; margin: 0px; align-items: center; width: 200px; height: 100px; border: 1px solid black; } .date-label{ font-weight: bold; } .table-cell{ display: flex; } .inner-container{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .event{ border-bottom-left-radius: 8px; border-top-left-radius: 8px; width: 150%; background-color: cornflowerblue; position: relative; top: 0px; left: 0px; } <div class="table-cell"> <div class="cell-container"> <div class="inner-container"> <label class="date-label">23</label> <div class="event">Event @4:00 pm</div> </div> </div> <div class="cell-container"> <div class="inner-container"> <label class="date-label">24</label> </div> </div> <div class="cell-container"> <div class="inner-container"> <label class="date-label">25</label> </div> </div> </div> Como puede ver en el fragmento, mi evento continúa expandiéndose tanto a la izquierda como a la derecha, en lugar de expandirse explícitamente a la derecha. Intenté usar position: sticky y position: absolute pero ambos terminan en el mismo resultado.
¿Hay alguna forma de restringir la dirección en la que se expande el div? o no es esta una posibilidad? ¡Cualquier y todos los comentarios serían apreciados, TIA!
2 answers
Answer question0
Puede lograr esto configurando justify-content para flex-start y eliminando align-items: center en la clase inner-container .
Agregar align-self: center; a la clase date-label para mantenerla centrada:
.cell-container{ display: flex; justify-content: center; margin: 0px; align-items: center; width: 200px; height: 100px; border: 1px solid black; } .date-label{ font-weight: bold; align-self: center; } .table-cell{ display: flex; } .inner-container{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .event{ border-bottom-left-radius: 8px; border-top-left-radius: 8px; width: 150%; background-color: cornflowerblue; position: relative; top: 0px; left: 0px; } <div class="table-cell"> <div class="cell-container"> <div class="inner-container"> <label class="date-label">23</label> <div class="event">Event @4:00 pm</div> </div> </div> <div class="cell-container"> <div class="inner-container"> <label class="date-label">24</label> </div> </div> <div class="cell-container"> <div class="inner-container"> <label class="date-label">25</label> </div> </div> </div>0
Debe eliminar la propiedad align-items en el contenedor interno para expandir desde la izquierda. (También puede configurarlo para start o normal ). Si desea que el número de fecha permanezca centrado, debe establecer la propiedad align-self en el centro. Vea abajo.
.cell-container{ display: flex; justify-content: center; margin: 0px; align-items: center; width: 200px; height: 100px; border: 1px solid black; } .date-label{ font-weight: bold; } .table-cell{ display: flex; align-self: center; } .inner-container{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } .event{ border-bottom-left-radius: 8px; border-top-left-radius: 8px; width: 150%; background-color: cornflowerblue; position: relative; top: 0px; left: 0px; } <div class="table-cell"> <div class="cell-container"> <div class="inner-container"> <label class="date-label">23</label> <div class="event">Event @4:00 pm</div> </div> </div> <div class="cell-container"> <div class="inner-container"> <label class="date-label">24</label> </div> </div> <div class="cell-container"> <div class="inner-container"> <label class="date-label">25</label> </div> </div> </div>