Проблема с позиционированием

197
16 мая 2018, 07:00

<div class="wrapper wrapper-content"> 
  <style> 
    .calendar { 
      display: table; 
      width: 100%; 
    } 
     
    .calendar-header { 
      display: table-row-group; 
      width: 100%; 
    } 
     
    .calendar-header .day { 
      display: table-cell; 
      text-align: center; 
      font-weight: bold; 
      border-top: 1px solid #ddd; 
      border-right: 1px solid #ddd; 
      border-bottom: 1px solid #ddd; 
      width: 146px; 
      max-width: 146px; 
    } 
     
    .calendar-body { 
      display: table-row-group; 
      width: 100%; 
    } 
     
    .calendar-body .day:nth-child(1), 
    .calendar-header .day:nth-child(1) { 
      border-left: 1px solid #ddd; 
    } 
     
    .calendar-body .day { 
      display: table-cell; 
      position: relative; 
      border-right: 1px solid #ddd; 
      border-bottom: 1px solid #ddd; 
      padding: 0 2px; 
      max-width: 146px; 
    } 
     
    .calendar-week-container { 
      display: table-row; 
      min-height: 4em; 
      border-style: solid; 
      border-width: 0; 
      height: 141px; 
    } 
     
    .fc-day-grid-event { 
      background-color: rgb(26, 179, 148); 
      border-bottom-color: rgb(26, 179, 148); 
      border-bottom-left-radius: 3px; 
      border-bottom-right-radius: 3px; 
      border-bottom-style: solid; 
      border-bottom-width: 1px; 
      border-collapse: collapse; 
      border-image-outset: 0px; 
      border-image-repeat: stretch; 
      border-image-slice: 100%; 
      border-image-source: none; 
      border-image-width: 1; 
      border-left-color: rgb(26, 179, 148); 
      border-left-style: solid; 
      border-left-width: 1px; 
      border-right-color: rgb(26, 179, 148); 
      border-right-style: solid; 
      border-right-width: 1px; 
      border-top-color: rgb(26, 179, 148); 
      border-top-left-radius: 3px; 
      border-top-right-radius: 3px; 
      border-top-style: solid; 
      border-top-width: 1px; 
      box-sizing: content-box; 
      color: rgb(255, 255, 255); 
      cursor: pointer; 
      direction: ltr; 
      display: block; 
      font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
      font-size: 11.05px; 
      font-weight: 400; 
      height: 14px; 
      line-height: 14.365px; 
      margin-bottom: 0px; 
      margin-left: 2px; 
      margin-right: 2px; 
      margin-top: 1px; 
      padding-bottom: 4px; 
      padding-left: 6px; 
      padding-right: 6px; 
      padding-top: 4px; 
      text-align: left; 
      text-decoration-color: rgb(255, 255, 255); 
      text-decoration-line: none; 
      text-decoration-style: solid; 
      text-size-adjust: 100%; 
      user-select: none; 
      -webkit-border-horizontal-spacing: 0px; 
      -webkit-border-vertical-spacing: 0px; 
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
      width: 90%; 
    } 
     
    .fc-day-grid-event .fc.content { 
      border-bottom-color: rgb(221, 221, 221); 
      border-collapse: collapse; 
      border-left-color: rgb(221, 221, 221); 
      border-right-color: rgb(221, 221, 221); 
      border-top-color: rgb(221, 221, 221); 
      box-sizing: content-box; 
      color: rgb(255, 255, 255); 
      cursor: pointer; 
      direction: ltr; 
      display: block; 
      font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
      font-size: 11.05px; 
      font-weight: 400; 
      height: 14px; 
      line-height: 14.365px; 
      overflow-x: hidden; 
      overflow-y: hidden; 
      position: relative; 
      text-align: left; 
      text-size-adjust: 100%; 
      user-select: none; 
      white-space: nowrap; 
      width: 128px; 
      z-index: 2; 
      -webkit-border-horizontal-spacing: 0px; 
      -webkit-border-vertical-spacing: 0px; 
      -webkit-tap-highlight-color: black; 
    } 
     
    .fc-day-grid-event .fc.content .fc-title { 
      border-collapse: collapse; 
      box-sizing: content-box; 
      color: rgb(255, 255, 255); 
      cursor: pointer; 
      direction: ltr; 
      display: inline; 
      font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
      font-size: 11.05px; 
      font-weight: 400; 
      height: auto; 
      line-height: 14.365px; 
      text-align: left; 
      text-size-adjust: 100%; 
      user-select: none; 
      white-space: nowrap; 
      width: auto; 
      -webkit-border-horizontal-spacing: 0px; 
      -webkit-border-vertical-spacing: 0px; 
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    } 
  </style> 
  <div class="calendar"> 
    <div class="calendar-header"> 
      <div class="day"> 
        Sun 
      </div> 
      <div class="day"> 
        Mon 
      </div> 
      <div class="day"> 
        Tue 
      </div> 
      <div class="day"> 
        Wed 
      </div> 
      <div class="day"> 
        Thu 
      </div> 
      <div class="day"> 
        Fri 
      </div> 
      <div class="day"> 
        Sat 
      </div> 
    </div> 
    <div class="calendar-body"> 
 
      <div class="calendar-week-container"> 
        <div class="day empty"></div> 
        <div class="day empty"></div> 
        <div class="day" data-date="2018-05-01"><span class="dayNumber">1</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-02"><span class="dayNumber">2</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-03"><span class="dayNumber">3</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-04"><span class="dayNumber">4</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-05"><span class="dayNumber">5</span> 
          <div class="events"></div> 
        </div> 
      </div> 
      <div class="calendar-week-container"> 
        <div class="day" data-date="2018-05-06"><span class="dayNumber">6</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-07"><span class="dayNumber">7</span> 
          <div class="events"> 
            <div> 
              <a class="fc-day-grid-event" data-id="38717" data-sort="0" data-program="1" data-editable="1" data-workout-id="36" style="background-color: rgb(26, 123, 185); border-color: rgb(26, 123, 185);"> 
                <div class="fc-content"><span class="fc-title">Bridge: Oppo Day</span></div> 
                <div class="fc-resizer fc-end-resizer"></div> 
              </a> 
            </div> 
          </div> 
        </div> 
        <div class="day" data-date="2018-05-08"><span class="dayNumber">8</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-09"><span class="dayNumber">9</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-10"><span class="dayNumber">10</span> 
          <div class="events"> 
            <div> 
              <a class="fc-day-grid-event" data-id="38723" data-sort="0" data-program="0" data-editable="1" data-workout-id="223" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);"> 
                <div class="fc-content"><span class="fc-title">Mound Blending A</span></div> 
                <div class="fc-resizer fc-end-resizer"></div> 
              </a> 
            </div> 
          </div> 
        </div> 
        <div class="day" data-date="2018-05-11"><span class="dayNumber">11</span> 
          <div class="events"> 
            <div> 
              <a class="fc-day-grid-event" data-id="38724" data-sort="0" data-program="3" data-editable="1" data-workout-id="251" style="background-color: rgb(248, 172, 89); border-color: rgb(248, 172, 89);"> 
                <div class="fc-content"><span class="fc-title">Upper Strength</span></div> 
                <div class="fc-resizer fc-end-resizer"></div> 
              </a> 
            </div> 
          </div> 
        </div> 
        <div class="day" data-date="2018-05-12"><span class="dayNumber">12</span> 
          <div class="events"></div> 
        </div> 
      </div> 
      <div class="calendar-week-container"> 
        <div class="day" data-date="2018-05-13"><span class="dayNumber">13</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-14"><span class="dayNumber">14</span> 
          <div class="events"> 
            <div> 
              <a class="fc-day-grid-event" data-id="38725" data-sort="0" data-program="0" data-editable="1" data-workout-id="223" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148); width: 912px;"> 
                <div class="fc-content"><span class="fc-title">Mound Blending A</span></div> 
                <div class="fc-resizer fc-end-resizer"></div> 
              </a> 
            </div> 
            <div> 
              <a class="fc-day-grid-event" data-id="38726" data-sort="0" data-program="0" data-editable="1" data-workout-id="231" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);"> 
                <div class="fc-content"><span class="fc-title">VeloDay 6oz-4oz</span></div> 
                <div class="fc-resizer fc-end-resizer"></div> 
              </a> 
            </div> 
            <div> 
              <a class="fc-day-grid-event" data-id="38727" data-sort="0" data-program="0" data-editable="1" data-workout-id="237" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);"> 
                <div class="fc-content"><span class="fc-title">HybridA</span></div> 
                <div class="fc-resizer fc-end-resizer"></div> 
              </a> 
            </div> 
          </div> 
        </div> 
        <div class="day" data-date="2018-05-15"><span class="dayNumber">15</span> 
          <div class="events"> 
            <div> 
              <a class="fc-day-grid-event" data-id="38728" data-sort="0" data-program="0" data-editable="1" data-workout-id="223" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);"> 
                <div class="fc-content"><span class="fc-title">Mound Blending A</span></div> 
                <div class="fc-resizer fc-end-resizer"></div> 
              </a> 
            </div> 
          </div> 
        </div> 
        <div class="day" data-date="2018-05-16"><span class="dayNumber">16</span> 
          <div class="events"> 
            <div> 
              <a class="fc-day-grid-event" data-id="38729" data-sort="0" data-program="0" data-editable="1" data-workout-id="226" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);"> 
                <div class="fc-content"><span class="fc-title">X2-LiveABs</span></div> 
                <div class="fc-resizer fc-end-resizer"></div> 
              </a> 
            </div> 
          </div> 
        </div> 
        <div class="day" data-date="2018-05-17"><span class="dayNumber">17</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-18"><span class="dayNumber">18</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-19"><span class="dayNumber">19</span> 
          <div class="events"></div> 
        </div> 
      </div> 
      <div class="calendar-week-container"> 
        <div class="day" data-date="2018-05-20"><span class="dayNumber">20</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-21"><span class="dayNumber">21</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-22"><span class="dayNumber">22</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-23"><span class="dayNumber">23</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-24"><span class="dayNumber">24</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-25"><span class="dayNumber">25</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-26"><span class="dayNumber">26</span> 
          <div class="events"></div> 
        </div> 
      </div> 
      <div class="calendar-week-container"> 
        <div class="day" data-date="2018-05-27"><span class="dayNumber">27</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-28"><span class="dayNumber">28</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-29"><span class="dayNumber">29</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-30"><span class="dayNumber">30</span> 
          <div class="events"></div> 
        </div> 
        <div class="day" data-date="2018-05-31"><span class="dayNumber">31</span> 
          <div class="events"></div> 
        </div> 
        <div class="day empty"></div> 
        <div class="day empty"></div> 
      </div> 
    </div> 
  </div> 
</div>

На 14 дате есть растянутые событие до 17 числа, но на 15 и 16 есть тоже события, как сделать так чтобы эти события опускались ниже? absolute позиционирование естестевенно не поможет, табличную верстку я не хочу, так как требуется сделать сортировку между событиями в дне

READ ALSO
Vue template compilation failed while parsing file

Vue template compilation failed while parsing file

Все из-за того что к главному скрипту я подключаю сразу несколько компонентовК примеру:

193
Вопрос по fancybox (js альбом)

Вопрос по fancybox (js альбом)

Поставил fancybox, чтобы был нормальный фотоальбомТак вот, я использовал data-caption="", и у меня отображается все слево (некрасивое описание получается)

194
Использование vue.js в landing page

Использование vue.js в landing page

Всем приветУже написал пару простых SPA на vue

672
JSON данные обработка на Jquery и вывод в HTML

JSON данные обработка на Jquery и вывод в HTML

Проблема в том, что не получается из функции, которая принимает данные, взять и обработать данные пользователейПрошу помочь и подробно рассказать,...

216