Мобильная версияЯ делаю экран заказа для кухни (например, просто введите в Google запрос «кухонная витрина»). Ящики работают, но они наследуют высоту первого порядка.
Посмотрите, как во втором и третьем порядке меньше элементов (пунктов маркированного списка), чем в первом, но при этом они имеют одинаковую высоту. Мне бы хотелось, чтобы они имели свой размер в зависимости от того, что находится внутри коробки. Точно так же, как в примере с кухонной витриной.
[*] Управление заказами тело { цвет фона: белый; отступ слева: 340 пикселей; } .order-контейнер { дисплей: гибкий; flex-wrap: обертка; /* Разрешить перенос полей на следующую строку */ } .order-box { граница: 2 пикселя, сплошная #000; радиус границы: 20 пикселей; отступ: 10 пикселей; поле: 10 пикселей; ширина: 200 пикселей; } ч2 { выравнивание текста: по центру; } Управление заказами Создать новый заказ {% для order_id, элементы в order.items() %} Заказ {{ order_id }} {% для элемента в элементах %} {{ элемент }} {% конец для %} Добавить элемент Удалить заказ {% конец для %} // Функция для установки высоты поля ордера на основе его содержимого функция resizeOrderBox(orderId) { const orderBox = document.getElementById(`order-${orderId}`); const ul = orderBox.querySelector('ul'); ul.style.height = 'авто'; const newHeight = ul.offsetHeight; ul.style.height = ''; orderBox.style.height = newHeight + 'px'; } Колба:
из фляги импорта Flask, render_template, запрос приложение = Колба(__name__) # Для простоты храните заказы в словаре (вы можете использовать базу данных для реального приложения) заказы = {} @app.route('/') индекс защиты(): return render_template('index.html',orders=orders) @app.route('/create_order', методы=['POST']) защита create_order(): order_id = len(заказы) + 1 orders[order_id] = [] # Инициализируем новый заказ пустым списком return render_template('index.html',orders=orders) @app.route('/add_item', методы=['POST']) защита add_item(): order_id = int(request.form['order_id']) элемент = запрос.форма['элемент'] заказы[order_id].append(пункт) return render_template('index.html',orders=orders) @app.route('/delete_order', методы=['POST']) защита delete_order(): order_id = int(request.form['order_id']) если order_id в заказах: дель заказов[order_id] return render_template('index.html',orders=orders) если __name__ == '__main__': app.run(отладка=Истина)
