Во-первых, я хотел бы построить простой календарь с событием.
Я использую 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>
.
Как мы можем это сделать?
Вы не можете добавлять div внутри table
, если он не находится внутри тегов td
.
@AndrewL, поэтому мне нужно будет преобразовать мою таблицу в div?
Было бы неплохо, да.
@AndrewL, значит, один div на <td>
?
Я бы порекомендовал полностью отказаться от таблиц и использовать вместо них гибкие блоки div, как упоминал @TeylerHalama.
Я лично разработал календарное приложение с использованием Flex Box, и, честно говоря, это лучшее, что произошло в сети за многие годы. Использование div в таблицах вызовет у вас головную боль на протяжении всего процесса разработки и заставит ваш код не быть чистым.
@TeylerHalama: я рассмотрел вашу идею и успешно слил свой код с гибким боксом. Не могли бы вы помочь мне с моим вопросом? Заранее спасибо.
@PacPac Привет, я рад это слышать! Это выглядит гладко. Я не совсем понимаю вопрос, вы пытаетесь расставить номера по дням?
@TeylerHalama, предположим, у меня есть бронь на номер 101 с 03.05.2018 по 05.05.2018, я хотел бы вставить div, который будет охватывать данные даты в моем календаре.
Интересный вопрос, о котором я раньше не задумывался. Похоже, вам нужно реструктурировать то, как вы думаете о приложении. Вместо того чтобы думать о днях как о фокусе (как мы делаем по умолчанию) в формате таблицы, нам нужно думать о них как о сфокусированных на событиях. Таким образом, вы можете делать такие вещи, как охватывать события на несколько дней. Есть действительно потрясающий пост, который более подробно описывает это здесь. У поста даже есть отличная рабочий пример, с которой можно повозиться.
Разметка HTML для многодневных календарных событий
Если бы вы сосредоточились на этом день, вам пришлось бы сделать несколько фантомных макетов, и это привело бы к большому беспорядку, нечистоте и трудностям в управлении кодом. Надеюсь, это поможет, чувак! Это увлекательный проект и интересная задача, которую нужно решить :)
Ваше здоровье!
Спасибо за помощь и ссылку. Буду читать и бережно хранить.
Удачи вам. Ты получил это :)
Вы рассматривали возможность использования Flexbox для решения этой проблемы? В зависимости от причины, по которой вам нужен div в таблице, flexbox может быть более динамичным и гибким для вашего варианта использования.