Вставьте div в другой с помощью PHP или JS

Во-первых, я хотел бы построить простой календарь с событием.

Я использую flexbox для создания макета своего календаря:
https://jsfiddle.net/97c0aLb8/1/

Моя строка на самом деле следующая:

<div class = "week">
    <div class = "day">Room #101</div>
    <div class = "day" id = "2018-05-01_1"></div>
    <div class = "day" id = "2018-05-02_1"></div>
    <div class = "day" id = "2018-05-03_1"></div>
    <div class = "day" id = "2018-05-04_1"></div>
    <div class = "day" id = "2018-05-05_1"></div>
    <div class = "day" id = "2018-05-06_1"></div>
    <div class = "day" id = "2018-05-07_1"></div>
    <div class = "day" id = "2018-05-08_1"></div>
    <div class = "day" id = "2018-05-09_1"></div>
    <div class = "day" id = "2018-05-10_1"></div>
</div>

Как я могу вставить еще один div поверх моего макета и обложки 2 <div class = "day">...</div>.

Вот пример

Как мы можем это сделать?

Вы рассматривали возможность использования Flexbox для решения этой проблемы? В зависимости от причины, по которой вам нужен div в таблице, flexbox может быть более динамичным и гибким для вашего варианта использования.

Teyler Halama 01.05.2018 21:41

Вы не можете добавлять div внутри table, если он не находится внутри тегов td.

AndrewL64 01.05.2018 21:53

@AndrewL, поэтому мне нужно будет преобразовать мою таблицу в div?

user9727179 01.05.2018 21:53

Было бы неплохо, да.

AndrewL64 01.05.2018 21:54

@AndrewL, значит, один div на <td>?

user9727179 01.05.2018 21:55

Я бы порекомендовал полностью отказаться от таблиц и использовать вместо них гибкие блоки div, как упоминал @TeylerHalama.

AndrewL64 01.05.2018 21:57

Я лично разработал календарное приложение с использованием Flex Box, и, честно говоря, это лучшее, что произошло в сети за многие годы. Использование div в таблицах вызовет у вас головную боль на протяжении всего процесса разработки и заставит ваш код не быть чистым.

Teyler Halama 01.05.2018 21:59
css-tricks.com/snippets/css/a-guide-to-flexbox
Teyler Halama 01.05.2018 22:00

@TeylerHalama: я рассмотрел вашу идею и успешно слил свой код с гибким боксом. Не могли бы вы помочь мне с моим вопросом? Заранее спасибо.

user9727179 02.05.2018 03:16

@PacPac Привет, я рад это слышать! Это выглядит гладко. Я не совсем понимаю вопрос, вы пытаетесь расставить номера по дням?

Teyler Halama 02.05.2018 03:22

@TeylerHalama, предположим, у меня есть бронь на номер 101 с 03.05.2018 по 05.05.2018, я хотел бы вставить div, который будет охватывать данные даты в моем календаре.

user9727179 02.05.2018 03:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
11
54
1

Ответы 1

Интересный вопрос, о котором я раньше не задумывался. Похоже, вам нужно реструктурировать то, как вы думаете о приложении. Вместо того чтобы думать о днях как о фокусе (как мы делаем по умолчанию) в формате таблицы, нам нужно думать о них как о сфокусированных на событиях. Таким образом, вы можете делать такие вещи, как охватывать события на несколько дней. Есть действительно потрясающий пост, который более подробно описывает это здесь. У поста даже есть отличная рабочий пример, с которой можно повозиться.

Разметка HTML для многодневных календарных событий

Если бы вы сосредоточились на этом день, вам пришлось бы сделать несколько фантомных макетов, и это привело бы к большому беспорядку, нечистоте и трудностям в управлении кодом. Надеюсь, это поможет, чувак! Это увлекательный проект и интересная задача, которую нужно решить :)

Ваше здоровье!

Спасибо за помощь и ссылку. Буду читать и бережно хранить.

user9727179 02.05.2018 03:33

Удачи вам. Ты получил это :)

Teyler Halama 02.05.2018 03:40

Другие вопросы по теме