Как зафиксировать контейнер для строк в одном положении?
У меня есть контейнер item, в котором на одной строке расположены по порядку название, дата и статус, заданные с помощью
.title { display: flex; justify-content: space-between; } |
.title { display: flex; justify-content: space-between; }
Ниже расположено описание. Соответственно, таких контейнеров может располагаться много. Но если статус у них будет разный (в моем случае "In Progress" и "Done" => ширина блока меняется) и отсюда строка даты у каждой колонки едет
Мне нужно сделать так, чтобы дата была фиксированной и ровной, вне зависимости от статуса
https://codepen.io/fiorgf/pen/QWJggzM
Зафиксировать ширину - помогает, но вариант, как мне кажется, костыльный
Дополнительно:
задайте flex-basis для блока со статусом
.status { display: flex; flex-basis: 66px; } |
.status { display: flex; flex-basis: 66px; }
но почему именно 66px делает ее ровно? на что это влияет?
тут можно экспериментировать, но я бы хотел более динамичное решение, а не зафиксировать базовый размер
Есть <table> - чудесно подходит для табличных данных.
Есть display table и grid.
Но можете считать ширину на js.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для зафиксирования контейнера для строк в одном положении можно использовать CSS свойство position со значением fixed. Это позволит элементу оставаться на одном месте на странице даже при прокрутке.
Пример использования:
.container { position: fixed; top: 50px; /* расположить контейнер сверху страницы на 50px */ left: 20px; /* расположить контейнер слева на 20px */ background-color: #f1f1f1; padding: 10px; } <div class="container"> Здесь содержимое контейнера, которое будет зафиксировано на странице. </div>
В этом примере контейнер будет зафиксирован в верхнем левом углу страницы на 50px сверху и 20px слева. Вы можете изменить значения свойств top и left в соответствии с вашими потребностями.
Таким образом, используя CSS свойство position: fixed, вы можете легко зафиксировать контейнер для строк в одном положении на странице.